使用 jquery 插件的自定义表单验证，基于属性答案

【问题标题】：Custom form validation using jquery plugin, based on attributes使用 jquery 插件的自定义表单验证，基于属性
【发布时间】：2019-09-02 14:42:07
【问题描述】：

我正在使用 Jquery valdiation plugin 在客户端验证表单。但我想做这样的验证。

<input type="text" id="txtInf" regex="/some regular expression/" error="Inf is mandatory"></inf>

这里 regex 和 error 是自定义属性。字段将根据正则表达式中的给定正则表达式进行验证，如果正则表达式文本失败，则应显示错误消息。

我尝试像这样向 validator 添加一个方法。

 $("*[regex]").each(function () {

            $.validator.addMethod($(this).attr('id'), function () {
                return this.optional($(this)) || $(this).attr('regex').test($(this).text());
            }, $(this).attr('error'));

});

但是这种方法存在一些问题。请让我知道，如果我认为它是正确的。如果您有其他想法，请告诉我。欢迎任何思考过程。

【问题讨论】：

标签： javascript jquery validation

【解决方案1】：

我没有使用过那个插件，但看起来你会因为使用 test() 得到一个错误。

$(this).attr('regex').test($(this).text());

应该是

var regEx = new RegExp($(this).attr('regex'));
regEx.test($(this).text());

【讨论】：

【解决方案2】：

只需几行代码就可以在引导程序中进行自定义表单验证

//在html中添加以下代码

  <form id="addForm" action=" " method="post" class="needs-validation" novalidate> </form>

//在脚本标签中添加这个

(function() {
    'use strict';
    window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
            document.getElementById("btn_inject").addEventListener("click", function(event) {
                //form.addEventListener('submit', function(event) {

                if (form.checkValidity() === false) {

                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');

            }, false);
        });
    }, false);
})
();

//您还需要这个来使文本框返回以取消验证

 $("#Modalidname").on('hide.bs.modal', function() {
                $("#Formidname").removeClass('was-validated');

            });

【讨论】：