5.validate

1. validate插件的准备工作(表单校验)

1.1 下载

1. 官网地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip
2. 帮助文档位置：http://jqueryvalidation.org/documentation/
3. 目录结构：

1.2 导入

validate是jQuery插件，及必须在jQuery的基础上进行运行。我们将导入jQuery库、validate库、和国际化资源库（可选）

 <!--依赖的jQuery库-->
<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8" />
<!--validate校验库-->
<script src="../js/jquery.validate.js" type="text/javascript" charset="utf-8" />
<!--国际化库，中文提示（可选）-->
<script src="../js/messages_zh.js" type="text/javascript" charset="utf-8" />

1.3 使用前提

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

<script type="text/javascript">
    $(function () {
        $("#formId").validate();
    });
</script>

• rules格式:
  
  • 格式1:
    
    • 字段的name属性:”校验器”
  • 格式2:
    
    • 字段的name属性:{校验器:值,校验器:值}

编写规则示例代码

<script type="text/javascript">    
    $(function(){
        $("#formId").validate({
            rules:{
                username:"required",//必填
                password:{
                    required:true,//必填
                    digits:true //数字    
                },
                repassword:{
                    equalTo:"[name='password']"//判断是否相同
                },
                zuixiaozhi:{
                    min:5//最小值
                },
                shuzhiqujian:{
                    range:[5,120]//数字区间
                },
            },
            //提示信息
            messages:{
                username:"用户名不能为空",
                password:{
                    required:"密码不能为空",
                    digits:"密码只能使数字"
                },
                repassword:{
                    equalTo:"两次输入不一致"
                },
                zuixiaozhi:{
                    min:"最小值应该大于{0}"
                },
                shuzhiqujian:{
                    //0是上面的第一个数字，1是第二个数字
                    range:"输入的范围在{0}-{1}之间"
                },
            }
        });
    });
</script>

- 注意：

    `<label for="sex" class="error"></label>`

这为表单校验的显示信息，for=”那个控件的name”