本帖最后由 zhouyan19901008 于 2019-2-23 20:18 编辑
1.下载l 官网地址:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip l 帮助文档位置:http://jqueryvalidation.org/documentation/ l 目录结构:
1.1 导入validate是jQuery插件,及必须在jQuery的基础上进行运行。我们将导入jQuery库、validate库、和国际化资源库(可选) <!--依赖的jQuery库--> <script src="../js/jquery-1.11.0.js"type="text/javascript" charset="utf-8" /> <!--validation校验库--> <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.2 使用前提validate需要手动的声明,对那个表单进行校验,及需要手动调用validate()方法。
<script type="text/javascript"> $().ready(function() { $("#formId").validate(); }); </script>
1.3 常见校验规则
1.4 检验方式:js 代码方式语法: $(…).validate({ rules:{}, messages:{} });
rules 规则语法: rules:{ 字段名:校验器, name属性:校验规则 字段名:校验器 }
校验器语法: 语法:{校验器:值,校验器:值,...}
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}之间" } } });
1.5 案例实现JS代码
<script src="../js/jquery-1.11.0.js"type="text/javascript" charset="utf-8"></script> <script src="../js/jquery.validate.js"type="text/javascript" charset="utf-8"></script> <script src="../js/messages_zh.js"type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $().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>
|