添加自定义验证功能以引导4验证

时间:2018-08-03 08:10:59

标签: javascript twitter-bootstrap forms validation bootstrap-4

因此,我正在查看Bootstrap 4的用于表单验证的帮助程序脚本(如下)。但是,是否可以向form.checkValidity()=== false添加更多函数?我问的原因是因为我是否有文本字段,但是我想确保它在文本字段中仅是字母数字?下面的脚本将6564654655673467*%(&^%%$视为 ok 进行文本输入,但是在我看来,这不应该。我问的原因是因为下面的脚本做的很好,如果该脚本显示错误消息并且您开始键入,则它会在您键入时删除错误消息。此外,我还有一个函数(也在下面),该函数检查它是否有效并返回true或false。

我基本上希望错误消息消失而不必检查表单上每个输入的输入是否无效。

表单验证

(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('js_twbs_form');
    // Loop over them and prevent submission
    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);
})();

名称验证功能

function usecaseValidation(auctionUseCase) {

  if (auctionUseCase === "") {
    document.getElementById('useCaseError').innerHTML = "Auction case cannot be empty.";
    return false;
  } else if (auctionUseCase.match(/^[\w\-\s]+$/i) == null) {
    document.getElementById('useCaseError').innerHTML = "Alphanumeric characters only.";
    return false;
  } else {
    return true;
  }
}

0 个答案:

没有答案