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-radio按钮时，＃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)

使用jQuery输入文本验证

1 个答案: