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

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

在这一点上，它是静态工作的。我需要添加一个eventlistener，但不知道如何添加

希望你能帮忙

HTML

---

问题是您正在事件侦听器外部声明

val

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

请参见下面的代码段：

var field=document.getElementById（'field_-robot'）；
field.addEventListener（'input'，function（））{
var val=document.getElementById（'field_'）。值；
如果（val！=“42”）{
字段。setCustomValidity（'invalid'）；
}否则{
event.target.setCustomValidity（“”）；
}
});

所以现在它运行良好

  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('');
  };
});

你的问题是什么？谢谢你的回答。我想验证输入字段。每次更改“field_robot”-字段的输入时，如果输入为42，则应检查该字段。您可以向输入字段添加onInput属性。并添加带有验证
输入的函数
是一个标准事件-@catalin您是对的。我更新了。谢谢你指出这一点。还有一件事。您还可以在submit按钮click事件上对所有元素执行表单验证。通过这种方式，您可以将验证集中到一个地方。虽然您是正确的，但OP要求在更改输入内容时进行验证，而不是在提交表单时：“每次更改“field_robot”-字段的输入时，如果输入为42，则应检查它。”。
var val = document.getElementById('field_robot').value;
var field = document.getElementById('field_robot');

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

  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('');
  };
});