javascript - 使用 jQuery 输入文本验证

Question

我遇到一种情况，我想验证输入文本字段中输入的文本。这是 HTML 代码:

<div id="err_title" style="display:none;">Please enter a valid Number.</div>
<input type="radio" id="txt_a-radio" value="valueA" checked="checked">
<input type="text" id="txt_a">
<input type="radio" id="txt_b-radio" value="valueB">
<input type="text" id="txt_b" disabled>

默认情况下#txt_b字段将被禁用，当用户单击#txt_b单选按钮时，#txt_b将被启用，而#txt_a将被禁用。

验证的条件是:

#txt_a can contain only 12 digit number
#txt_b can contain only 20 digit number

一旦用户在启用的字段中输入值然后单击外部的任意位置，就应该进行验证。如果用户输入的值无效，则应显示错误消息#err_title。

假设如果用户输入 #txt_a 的值，然后单击 #txt_b 单选按钮，则不应进行验证，因为用户已切换输入字段。在这种情况下，应禁用 #txt_a 并启用 txt_b。

我尝试过以下代码:

$('#txt_a').change(function() { 
    custNumber = $('#txt_a').val(); expression = /^[0-9]{12}$/; 
    if(custNumber === '') {
        $("#err_title").css('display', 'none'); 
    } else if ((!custNumber.match(regexp))) { 
        $("#err_title").css('display', 'block'); 
    } else { 
        $("#err_title").css('display', 'none'); 
    } 
});

Answer 1

$input1 = $('input[name="input1"]');
$input2 = $('input[name="input2"]');
$checkbox = $('input[name="checkbox"]');
 

$input1.on('change', function(e) {
  var isValid = this.value.length >= 12;
  
  this.classList.toggle('notValid', !isValid); 
})

$checkbox.on('change', function(e) {
  $input2.prop('disabled', !this.checked);
})

input.notValid {
  border: 1px solid red;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="input1" />
<input type="text" name="input2" disabled />
<input type="checkbox" name="checkbox" />

注意:在上面的示例中，我将 vanillia JS 与 jQuery 混合在一起。我建议避免它 - 我这样做是为了向您展示在没有 jQuery 的情况下做如此简单的事情是多么容易(当然并不总是......)。基本上，如果你想做这样简单的事情，我建议放弃 jQuery。

答案:

您正在寻找 jQuery change 事件。一旦输入松散焦点就会触发。

$(your_input).on('change', function(e) {...} )

您可以验证输入长度，例如(监听器内的函数):

var isValid = this.value.length === 12

禁用/启用输入也是如此。您必须将事件监听器附加到复选框

$(your_checkbox).on('change', function(e) {...} )

然后您可以获得复选框的状态:

var isChecked = this.checked

并禁用/启用您的输入

$(your_input).attr('disabled', !isChecked)