使用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)