jQuery.validate 表单校验

下载、安装

方法一：借用npm安装：

npm install jquery

npm i jquery-validation

方法二：

从 jquery.com 下载 jQuery 库

访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件。 

引用

    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    

使用

<form id="login">
    <div>
        <label for="account">账号</label>
        <input id="account" name="account" class="required"/><br/>
    </div>
    <input type="submit" value="提交"/>
</form>

 使用默认的校验

$().ready(function () {
            $('#login').validate({
                errorPlacement: function (error, element) { // 添加报错提醒
                    error.appendTo(element.parent());
                },
                // 添加规则方法一
                // rules:{
                //     account:{
                //         maxlength:3,
                //         digits:true // 必须是数字
                //     }
                // },
            })
            // 添加规则方法二
            $('#account').rules("add", {
                required: true
            });
            // 中文
            $.extend($.validator.messages,{
                required:"这是必填字段"
            })
        });

自定义校验 

$().ready(function () {
            $('#login').validate({
                errorPlacement: function (error, element) {
                    error.appendTo(element.parent());
                }
            });
            $('#account').rules("add", {
                numberForMe: true
            });
        });
        jQuery.validator.addMethod('numberForMe', function (value,element) {
                // 校验部分
                var reg = /^[1-9][0-9]+$/gi // 正则
                // if (reg.test(value)) {
                //     // test() 方法用于检测一个字符串是否匹配某个模式.语法RegExpObject.test(string)
                //     return true
                // } else {
                //     return false
                // }
            return this.optional(element) || reg.test(value);
            }, $.validator.format("请输入数字")
        );

---

errorPlacement() 可以自定义错误信息显示的位置

方法：function(error, element)  

参数：①.error:规定用来放置错误信息的元素，由errorElement属性配置

           ②.element:规定当前表单元素对象。

---

addMethod () 添加除内置的 Validation 方法之外的验证方法

方法：$.validator.addMethod(name,function(value , element){  return true||false },message)；

参数：①:用于type匹配的名称，自定义。

           ②:是一个function函数，决定了验证是否成功！里面是自定义验证。

           ③：当验证不成功时返回的提示错误信息。

---

test() 方法用于检测一个字符串是否匹配某个模式. 如果字符串中有匹配的值返回 true ，否则返回 false。 

方法：RegExpObject.test(string)

---

参考文章：

jQuery表单验证（Validate）使用方法 - 百度文库 

jQuery Validate教程_风神修罗使的博客-CSDN博客

jQuery.validator.addMethod 自定义验证方法 - 少辉在线 - 博客园

test() 用法_橙子味少女风的博客-CSDN博客_test方法