jquery.validation校验
Posted 心肺
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery.validation校验相关的知识，希望对你有一定的参考价值。
jquery Validata验证框架的详解
首先导入js库
<script src="jquery.validation/jquery-1.9.1.js"></script>
<script src="jquery.validation/jquery.validate.min.js"></script>
1.validate(options)是运行form表单的开始，他是用来验证你所选的form，以上代码的第五行“#myForm"是form的id名。
2.rules() 是校验规则他就是validate里的options,是用户定义的键/值对规则。键为一个表单元素的 name属性、值为一个简单的字符串或者由规则/参数对组成的一个对象。
3. messages ()是用户自定义的 键/值 对消息===键为一个表单元素的name属性，值为该表单元素将要显示的消息。
默认的校验规则
(1).required:true ---必须要填写的字段
(2).remote:"remote-valid.jsp" ---使用ajax方法调用remote-valid.jsp验证输入值
(3).email:true ---必须输入正确格式的电子邮件
(4).url:true ---必须输入正确格式的网址
(5).date:true ---必须输入争取格式的日期，日期校验ie6出错，慎用
(6).dateISO:true ---必须输入正确格式的日期（例如：2017-06-20, 2017/06/20）只验证格式，不验证有效性
(7).number:true ---必须输入合法的数字（负数，小数）
(8).digits:true ---必须输入整数
(9).creditcard:true ---必须输入合法的信用卡号
(10).equalTo:"#password" ---输入值必须和#password相同
(11).accept： --- 输入拥有合法的后缀名的字符串（上传文件的后缀）
(12).maxlength:5 ---输入长度最多的是5的字符串（汉字算一个字符）
(13).minlength:10 ---输入长度最小的是10的字符串（汉字算一个字符）
(14).ranglength:[5.10] ---输入的长度必须介于 5 和 10 之间的字符串（汉字算一个字符）
(15).range:[5,10] ---输入值必须介于 5 和 10 之间
(16).max:5 ---输入值不能大于5
(17).min:10 ---输入值不能小于10
其用法为：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #img { display: none; width: 30px; height: 30px; } </style> <script src="jquery.validation/jquery-1.9.1.js"></script> <script src="jquery.validation/jquery.validate.min.js"></script> <script src="js/ajax1.js"></script> <script> $(function() { var oLgn = $("#lgn"); var oReg = $("#reg"); var oImg = $("#img"); var oSpan = $("#span"); var oUser = $("#user"); var oPass = $("#pass"); $(‘#demoForm‘).validate({ rules: { //用户名 username: { required: true, rangelength: [6, 11] }, //密码 password: { required: true, rangelength: [11, 13] }, }, messages: { //用户名 username: { required: ‘此项必填‘, rangelength: ‘用户名长度为6-11位‘ }, //密码 password: { required: ‘此项必填‘, rangelength: ‘用户名长度为11-13位‘ } }, submitHandler: function() { oLgn.on(‘click‘, function() { myAjax(‘user.php‘, "lgn", oUser.val(), oPass.val()); }); oReg.on(‘click‘, function() { myAjax(‘user.php‘, "add", oUser.val(), oPass.val()); }) //myAjax(‘user.php‘,"lgn",oUser.val(),oPass.val()); function myAjax(url, act, userValue, passValue) { $.ajax({ url: url, data: { act: act, user: userValue, pass: passValue }, beforeSend: function() { oImg.css("display", "block") }, success: function(res) { var json = eval(‘(‘ + res + ‘)‘); oSpan.html(json.msg); }, complete: function() { oImg.css("display", "none") } }) } }, }); }); </script> </head> <body> <form action="" id="demoForm"> <p> <label for="user">username:</label> <input type="text" name="username" id="user" /> </p> <p> <label for="pass">password:</label> <input type="text" name="password" id="pass" /> </p> <p><input type="submit" value="登录" id="lgn" /> <input type="submit" value="注册" id="reg" /></p> <img src="loading.jpg" alt="" id="img" /> <span id="span"></span> </form> </body> </html>
希望以上内容会对大家有所帮助！！！
以上是关于jquery.validation校验的主要内容，如果未能解决你的问题，请参考以下文章
Jquery Validate 默认校验规则及常用的自定义验证规则