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/

目录结构：

二、导入

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>