1

checkValidity()我正在查看约束验证 API，并在网上找到了一些似乎调用<form>元素的示例代码：

(function() {
'use strict';
window.addEventListener('load', function() {
  var forms = document.getElementsByClassName('needs-validation');
  var validation = Array.prototype.filter.call(forms, function(form) {
    form.addEventListener('submit', function(event) {
      if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

但我自己尝试过这样做，但没有成功。我在其他任何地方也找不到任何关于这可能的参考。据我所知，它不能被调用<form>。有人可以帮我吗？

4

2 回答 2

2

您正在使用submit，但如果您正在使用input，则没有submit事件。您可以使用input或paste事件处理程序进行输入

window.addEventListener('load', function() {
  var forms = document.getElementsByClassName('needs-validation');
  var validation = Array.prototype.filter.call(forms, function(form) {
    form.addEventListener('input', function(event) {
      if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
    }, false);
  });
}, false);
<form>
  <input type='email' class='needs-validation'>
  <button type='submit'>Submit</button>
</form>

于 2020-09-14T16:26:04.070 回答
1

其实有很多方法可以点这个。好像你写了一个自调用的 JS 函数。另一种简单的方式，你可以简单地在tag中写一个onsubmit事件属性并写上函数名。

例如

<form onsubmit="return checkValidity()">
        //...rest stuff
</form>

根据函数返回的结果，是真还是假取决于表单将被提交或停止提交的条件。

于 2020-09-14T16:30:06.450 回答