前端验证框架：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输入值不能大于5min: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，将调用默认的信息