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/

目录结构：

二、导入

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

<!--依赖的jQuery库--><script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script><!--validate.js是建立在jquery之上的，所以得先导入jquery的类库--><script type="text/javascript" src="../../js/jquery.validate.min.js" ></script><!--引入国际化js文件--><script type="text/javascript" src="../../js/messages_zh.js" ></script>

三、使用前提

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

<script>    $().ready(function(){        $("#formId").validate();    });</script>

四、检验方式：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代码：

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>    <!--引入validate插件js文件-->    <script type="text/javascript" src="../js/jquery.validate.min.js" ></script>    <!--引入国际化js文件-->    <script type="text/javascript" src="../js/messages_zh.js" ></script>    <script>        $().ready(function(){            $("#formId").validate({                rules:{                    loginname:{                        required:true,                        minlength:2,                        maxlength:5                    },                    loginpwd:{                        required:true,                        number:true                    },                    reloginpwd:{                        equalTo:"[name='loginpwd']"                    },                    email:"email",                    username:{                        required:true,                        rangelength:[2,5]                    },                    gender:{                        required:true                    }                },                messages:{                    gender:{                        required:"性别必须勾选"                    }                }            });        });</script>

HTMl代码：

<input type="radio" name="gender" value="男" />男<input type="radio" name="gender" value="女" />女<!--在指定位置显示错误消息    *class 必须是error    *for 必须设置错误对象--><label for="gender" class="error"></label>

案例代码：

<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script><script type="text/javascript" src="../../js/jquery.validate.min.js" ></script><script type="text/javascript" src="../../js/messages_zh.js" ></script><script>    $(function(){        $("#registForm").validate({            rules:{                user:{                    required:true,                    minlength:2                },                password:{                    required:true,                    digits:true,                    minlength:6                },                repassword:{                    required:true,                    digits:true,                    minlength:6,                    equalTo:"[name='password']"                },                email:{                    required:true,                    email:true                },                username:{                    required:true,                    minlength:2                },                sex:{                    required:true                }            },            messages:{                user:{                    required:"用户名不能为空!",                    minlength:"用户名不得少于2个字符!"                },                password:{                    required:"密码不能为空!",                    digits:"密码必须是数字!",                    minlength:"密码长度不得低于6位!"                },                repassword:{                    required:"确认密码不能为空!",                    digits:"密码必须是数字!",                    minlength:"密码长度不得低于6位!",                    equalTo:"两次密码不一致!"                },                email:{                    required:"邮箱不能为空!",                    email:"邮箱格式不正确!"                },                username:{                    required:"姓名不能为空!",                    minlength:"姓名不得少于2个字符!"                },                sex:{                    required:"性别必须勾选!"                }            },            errorElement: "label", //用来创建错误提示信息标签            success: function(label) { //验证成功后的执行的回调函数                //label指向上面那个错误提示信息标签label                label.text(" ") //清空错误提示消息                    .addClass("success"); //加上自定义的success类            }        });    })</script>