jQuery中的validate校验

jQuery中的validate校验

一款优秀的表单验证插件——validation插件
特点：

• 内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则
• 自定义验证规则：可以很方便的自定义验证规则
• 简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能
• 实时验证：可以通过keyup或bulr事件触发验证，而不仅仅在表单提交的时候验证。

下载：
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

一、下载

官网地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip

帮助文档位置：http://jqueryvalidation.org/documentation/

目录结构：

目录结构.png

二、导入

validate是jQuery插件，其必须在jQuery的基础上进行运行。所以要导入jQuery库、validate库、国际化资源库（可选）

三、使用前提

validate需要手动的声明，对哪个表单进行校验，手动方式可以使用以下4种检验方式：

校验类型.PNG

四、检验方式：js代码方式

语法：

语法：
$(...).validate({
    rules:{},
    message:{}
});

rules规则语法：
    rules:{
        字段名：校验器,
        字段名：校验器
    }
    
校验器语法：
    语法：{校验器:值,校验器:值,...}
    
message提示语法：
    message:{
        字段名:{校验器:"提示",校验器:"提示",...}
    }

代码：

$("#formId").validate({
    rules:{
        username:{
            required:true
        },              
        password:{
            required:true,
            rangelength:[2,5]
        },              
        repassword:{
            equalTo:"[name='password']"
        }
    },
    messages:{
        username:{
            required:"不能为空"
        },
        password:{
            rangelength:"长度{0}-{1}之间"
        }
    }
});

案例：
JS代码：

HTMl代码：

男
女

案例代码：