介绍jquery.validate.js简单实用的表单验证框架

• 在线演示1
• 本地下载

最近在做用户登录、注册、以及用户中心...然后之前在慕课网学的jquery.validate用得着地方了，根据自己需求进行了细节修改，重要是样式方面吧。

第一次发表这些，说得不好不要介意，开始吧。首先：

1. $("#form").validate({
2. //在这里面编辑
3. });

验证的时候常常需要调试，该框架内置了一个方法，如下：

1. debug:true, //调试模式（并不会提交）

来个实例，HTML:

1. <div class="form-group">
2. <label for="username">用户名：</label>
3. <input type="text" name="username" id="username" placeholder="请输入用户名" />
4. </div>

用rules方法进行设置验证，然后需求是：必填项，长度在3-10之间：

1. $(document).ready(function(){
2. $("#form").validate({
3. debug:true, //调试模式
4. rules:{
5. username:{
6. required:true, //开启必填项
7. rangelength:[3,10] //请输入的数值在3至10位之间
8. };
9. };
10. });
11. });

我的理解是，获取 name值 和 type类型来验证的。来个重新输入密码吧：

html:

1. <div class="form-group">
2. <label for="confirm-password">确认密码：</label>
3. <input type="password" name="confirm-password" id="confirm-password" placeholder="请再次输入密码" />
4. </div>
5. js:

1. password:{
2. required:true,
3. rangelength:[6,12]
4. },
5. "confirm-password":{
6. equalTo:"#password" //必须密码相同
7. }

如果想要自定义提示消息呢，那就用messages方法吧：

1. messages:{
2. username:{
3. required:"用户名不能留空", //用户名的必填项提示
4. rangelength:"请检查您输入的数值的长度是否在2至10之间" //用户名的长度提示
5. }

下面说说样式方面吧，输入框提示错误时，class类变成error；输入框正确时，class类变成valid，所以不同情况，加不同颜色边框：

1. .form-group input.error{
2. border-color: #E74C3C;
3. }
4. .form-group input.valid {
5. border-color: #55D98D;
6. }

提示的消息呢？输入框提示错误时，该便签会弹出，类名为error；输入框提示正确时，该便签会隐藏，并加了类名success，那么：

1. .form-group span.error{
2. color: #E74C3C;
3. }
4. .form-group span.success{
5. display: none;
6. }

其实还有很多方法的，如：groups、errorPlacement...基本能满足表单验证需求，演示那里有个demo，看看就明白啦。

原文链接：http://www.gbtags.com/gb/share/5749.htm