Question

我正在玩表格验证。我已经构建了一个简单的验证码字段，我想通过javascript检查它。

此时它可以静态工作。我需要添加一个eventlistener，但不知道如何。

希望，你能提供帮助。

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

您的代码中存在一些问题：

1 - input不是标准的DOM事件。您可以收听几个事件，例如change。

2 - 您在事件监听器之外声明val。因此，输入后您的值永远不会刷新。您需要在事件侦听器中检索字段的值。

请参阅下面的代码：

var field = document.getElementById('field_robot');

field.addEventListener('change', 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('change', 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('');
  };
});

表单验证设置自定义有效性

2 个答案: