javascript - 将自定义验证函数添加到 bootstrap 4 验证

Question

所以我正在查看 Bootstrap 4 的帮助脚本以进行表单验证（如下）。但是，是否可以向 form.checkValidity() === false 添加更多功能？我问的原因是因为如果我有一个文本字段但我想确保它只是文本字段中的字母数字？下面的脚本认为这6564654655673467*%(&^%%$对于文本输入是可以的，但在我的情况下不应该。我问的原因是因为下面的脚本做了一件好事，如果它显示错误消息并且您开始输入，它会在您输入时删除错误消息。此外，我有一个函数（也在下面）检查它是否有效并返回真或假。

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

表单验证

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

标签： javascripttwitter-bootstrapformsvalidationbootstrap-4