前端验证框架：jquery-validate.js

简介

jquery.validate.js是我们经常用到的form表单验证插件，可以很方便的帮我们进行表单验证。

官网：https://bassistance.de/jquery-plugins/jquery-plugin-validation

校验规则

规则	说明
required:true	必输字段
remote:“check.php”	使用ajax方法调用check.php验证输入值
email:true	必须输入正确格式的电子邮件
url:true	必须输入正确格式的网址
date:true	必须输入正确格式的日期 日期校验ie6出错，慎用
dateISO:true	必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
number:true	必须输入合法的数字(负数，小数)
digits:true	必须输入整数
creditcard:	必须输入合法的信用卡号
equalTo:“#field” 输入值必须和#field相同
accept:	输入拥有合法后缀名的字符串（上传文件的后缀）
maxlength:5	输入长度最多是5的字符串(汉字算一个字符)
minlength:10	输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10]	输入值必须介于 5 和 10 之间
max:5	输入值不能大于5
min:10	输入值不能小于10

使用步骤

1. 引入jquery.min.js
2. 引入 jquery.validate.js
   3.页面加载后对表单进行验证 $(“#表单id名”).validate({}）
3. 在validate中的rules中编写验证规则，比如：
   • 字段的name属性:"校验器:（一个输入框只有一个校验器的时候使用）
   • 字段的name属性:{校验器:值,校验器:值} (输入框需要有多个校验器的时候使用)
4. 在validate中的messages中编写提示信息(格式与rules相对应)
5. 在validate中的submitHandler中编写验证通过执行的内容

使用

将校验规则写到控件中

     
     
    



	$(function (){
	    $("#loginForm").validate();
	});

将校验规则写到js代码中

    姓名： 
    用户头像：
    性别：男
          女    
    邮件： 
    电话：
    QQ： 
    微信： 
    积分： 
    简介： 
    验证码：
    
    



    $(function () {
        $("#userAddForm").validate({
            rules: {
                nickname: {
                    required: true,
                    minLength: 4
                },
                avatar: "required",
                email: {
                    required: true,
                    email: true
                },
                QQ: {
                    required: true,
                    minLength: 5
                },
                wechat: "required",
                credits: {
                    required: true,
                    digits: true
                },
                verifyCode:"required"
            },messages:{
                nickname: "请输入用户名",
                avatar:"请选择头像",
                email:"邮箱必须正确填写",
                QQ:"QQ不能为空且长度必须大于等于5",
                wechat: "微信不能为空",
                credits: "积分不能为空且必须为整数",
                verifyCode: "验证码不能为空",
            }
        })
    });

注：如果某个控件没有message，将调用默认的信息