本帖最后由 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>
| 
收藏
淘帖
踩
