jquery.validate 表单验证

插件：jquery.validate + jquery

背景：我们在使用表单的时候，通常会在提交之前，或者输入框失去焦点的时候，对表单进行验证，实现下图的效果：

下面介绍一下 通过第三方 jquery.validate 这个插件 进行表单提交前验证 并给出警告提示⚠️

1.引入依赖

  <script src="/webjars/jquery/3.2.1/jquery.min.js"></script>
  <script src="/webjars/jquery-validation/1.17.0/jquery.validate.min.js"></script>复制代码

2.HTML

<form id="form1" method="post" action="......">
 <input type="text"  name="name"/>
 <button type="submit">提交</button>
</form>复制代码

3.JS

这个插件库默认了一些规则，非空，长度...等等，如果想自定义规则就执行这句话：

jQuery.validator.addMethod("not_number_start", function(value, element) {
            return !(/^\d/.test(value.charAt(0))) // return false 的条件 才会触发警告提示
        }, "不能以数字开头，请修改");

        jQuery.validator.addMethod("not_include_space", function(value, element) {
            return value.indexOf(' ') === -1
        }, "不能含有空格，请修改");复制代码

                $().ready(function() {

                    $("#form1").validate({                        rules: {
                            name: {
                                required: true,
                                not_number_start: true,
                                not_include_space: true
                            }
                        },
                        messages: {
                            name: {
                                required: "请输入 track group 名称"   // 自定义提示语
                            }
                        },
                        submitHandler: function() { // 如果通过验证条件会执行这里
                          document.getElementById('form1').submit()                        }
                    });
                });复制代码

ok～小伙伴们可以测试一下！