javascript - 表单验证集自定义有效性

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 函数，拥有一个可用于多个输入字段的监听器会将您的事件和 bool 条件作为参数。

查看其他片段:

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>