Jquery的validate表单验证

Jquery的validate的表单验证功能学习

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

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

③导入

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" />

④使用前提
validate需要手动的声明

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

⑤检验器查询表

校验类型	取值	描述
required	true/false	必填字段
email	“@”或者”email”	邮件地址
url		路径
date	数字	日期
dateISO	字符串	日期（YYYY-MM-dd）
number		数字（负数，小数）
digits		整数
minlength	数字	最小长度
maxlength	数字	最大长度
rangelength	[minL,maxL]	长度范围
min		最小值
max		最大值
range	[min,max]	值范围
equalTo	jQuery表达式	两个值相同
remote	url路径	ajax校验

⑥检验方式：js 代码
语法：
$(…).validate({
rules:{},
messages:{}
});

rules 规则语法：
rules:{
字段名:”校验器”,
字段名:”校验器”
}

校验器语法：
语法1：”校验器”
语法2：{校验器:”取值”,校验器:”取值”,…}

message 提示语法：
message:{
字段名:{校验器:”提示”,校验器:”提示”,…}
}

⑦案例

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

⑧代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
        <!--validate校验库-->
        <script type="text/javascript" src="../js/jquery.validate.js"></script>
        <!--国际化库，中文提示-->
        <script type="text/javascript" src="../js/messages_zh.js"></script>

        <script type="text/javascript">
            $(function() {
                $("#formId").validate({
                    rules: {
                        username: "required",
                        password: {
                            required: true,
                            digits: true
                        },
                        repassword: {
                            equalTo: "[name='password']"
                        }
                    },
                    messages: {
                        username: "不可以为空",
                        password: {
                            required: "密码不可以为空",
                            digits: "请输入数字"
                        }
                    }
                });
            })
        </script>
    </head>

    <body>
        <form id="formId" action="">
            必填：<input type="text" name="username" /> <br/> 
            必填数字：<input type="text" name="password" /> <br /> 
            必填重复：<input type="text" name="repassword" /> <br /> 
            最小值：<input type="text" name="zuixiaozhi" /> <br /> 
            区间：<input type="text" name="shuzhiqujian" /> <br />
                <input type="submit" value="提交" />
        </form>
    </body>

</html>

效果图：

Jquery的validate表单验证

Jquery的validate的表单验证功能学习

猜你喜欢