表單驗證集自定義有效性

Question

我在玩表單驗證。 我已經建立了一個簡單的驗證碼字段，我想通過 javascript 檢查它。

在這一點上它是靜態的。 我需要添加一個事件偵聽器，但不知道如何添加。

希望，你能幫忙。

HTML

<form>
  <input type="text" id="field_robot" name="">
  <input type="submit" id="submit" name="submit">
</form>

JS

var val = document.getElementById('field_robot').value;
var field = document.getElementById('field_robot');

field.addEventListener('input', function(){
  if (val != '42') {
    field.setCustomValidity('invalid');
  } 
}); 

Answer 1

問題是您在事件偵聽器之外聲明了val 。 因此，您的值在輸入后永遠不會刷新。 您需要在事件偵聽器中檢索字段的值。

請參閱下面的片段：

 var field = document.getElementById('field_robot'); field.addEventListener('input', function() { var val = document.getElementById('field_robot').value; if (val != '42') { field.setCustomValidity('invalid'); } else { event.target.setCustomValidity(''); } });

 <form id="myForm"> <input type="text" id="field_robot" name=""> <input type="submit" id="submit" name="submit"> </form>

現在，您可以更進一步，擁有一個可用於多個輸入字段的偵聽器，使用偵聽器提供的event對象和一個fieldValidator函數，該函數將您的事件和布爾條件作為參數。

看到這個其他片段：

 var field = document.getElementById('field_robot'); field.addEventListener('input', function(event) { fieldValidator(event, (field.value == '42')); }); function fieldValidator(event, condition) { var val = event.target.value; if (!condition) { event.target.setCustomValidity('invalid'); } else { event.target.setCustomValidity(''); } }

 <form id="myForm"> <input type="text" id="field_robot" name=""> <input type="submit" id="submit" name="submit"> </form>

Answer 2

所以現在它運作良好。

  var field = document.getElementById('field_robot');

  field.addEventListener('change', function() {
  var val = document.getElementById('field_robot').value;
  if (val != '42') {
    field.setCustomValidity('invalid');
  } else {
    field.setCustomValidity('');
  };
});