使用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-radio按钮，则验证应该不会发生，因为用户已切换输入字段。在这种情况下，应禁用#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)