Jquery的validate表单验证

来源：互联网发布：支付宝怎么绑定淘宝编辑：程序博客网时间：2024/04/29 03:58

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>

效果图：

阅读全文

0 0