表单校验插件的使用

表单校验插件

（1）将jquery的原始文件和插件文件jquery.validate.js导入到工程中

（2）编写js代码对表单进行校验

表单校验的格式

$("form表单的选择器").validate(json数据格式);//键值对 键：值（{}）
json的数据格式：{
                rules：{
                表单项name值:校验规则，
                表单项name值:校验规则...
                }
                messages:{
                  表单项name值:错误提示信息，
                  表单项name值:错误提示信息...
                }
               }
               //其中校验规则，可以是一个也可以是多个，如果是多个使用json格式
​

常用的校验规则如下：

代码示例：

​

    $("#myform").validate({
        rules:{
            "username":{
                "required":true,
                "checkUsername":true
            },
            "password":{
                "required":true,
                "rangelength":[6,12]
            },
            "repassword":{
                "required":true,
                "rangelength":[6,12],
                "equalTo":"#password"
            },
            "email":{
                "required":true,
                "email":true
            },
            "sex":{
                "required":true
            }
        },
        messages:{
            "username":{
                "required":"用户名不能为空",
                "checkUsername":"用户名已存在"
            },
            "password":{
                "required":"密码不能为空",
                "rangelength":"密码长度6-12位"
            },
            "repassword":{
                "required":"密码不能为空",
                "rangelength":"密码长度6-12位",
                "equalTo":"两次密码不一致"
            },
            "email":{
                "required":"邮箱不能为空",
                "email":"邮箱格式不正确"
            }
        }
    });
});