jquery.validate 是jquery的一个插件,用来辅助开发者在客户端方便快捷的实现表单验证,最终达到提高用户体验的目的。
示例代码
<form id="formLogin" method="post"> <div> <label for="username">Username:</label> <input type="text" id="username" name="username" /> </div> <div> <label for="password">password:</label> <input type="text" id="password" name="password" /> </div> <div> <label for="password1">password1:</label> <input type="text" id="password1" name="password1" /> </div> <div> <label for="sex">sex:</label> <select id="sex" name="sex"> <option id="sexopt" value="" selected="selected">请选择</option> <option id="sexnan" value="1">男</option> <option id="sexnv" value="2">女</option> </select> </div> <div> <label for="favorite">level:</label> <input type="checkbox" id="sport" name="favorite" value="sport" />sport <input type="checkbox" id="write" name="favorite" value="write" />write </div> <div> <label for="level">level:</label> <input type="radio" id="one" name="level" value="one" />1 <input type="radio" id="two" name="level" value="two" />2 </div> <div> <input id="submit" type="button" value="submit" /> </div> </form> @section scripts{ <script type="text/javascript" src="/content/home/index.js"></script> }
jquery.validate在定位html标签的时候,默认使用name属性来获取标签,所以需要开发者给需要进行验证的标签都加上name属性,并且赋值。
index.js
$().ready(function () { $("#formLogin").validate({ rules: { username: { required: true }, password: { required: true }, sex: { required: true }, level: { required: true }, favorite: { required: true } }, messages: { username: { required: "please input username" }, password: { required: "please input password" }, sex: { required: "please select sex" }, level: { required: "level requred" }, favorite: { required: "favorite required" } }, errorPlacement: function (error, element) { //指定错误信息位置 if (element.is(‘:radio‘) || element.is(‘:checkbox‘)) { //如果是radio或checkbox var eid = element.attr(‘name‘); //获取元素的name属性 error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面 } else { error.insertAfter(element); } } }); }); $("#submit").click(function () { $("#submit").submit(); });
有时候我们需要使用正则表达式对一些输入进行验证,比如说邮箱,电话号码,或者是用户名必须字母开头并且长度要在5-30位,等等之类的。
jquery.validate默认没有提供正则表达式的验证,但是它提供了一个扩展,我们可以自己添加关于正则表达式的验证规则。
$(function () { // 判断用户输入的value是否满足传入的正则params的规范 jQuery.validator.addMethod("pattern", function (value, element, params) { if (!params.test(value)) { return false; } return true; }); });
这样我们就可以像下面这样使用我们自定义的正则表达式验证了。
$().ready(function () { $("#formLogin").validate({ rules: { tel: { required:true, pattern: /^[0-9]+$/ } }, messages: { tel: { required:‘tel required‘, pattern: "regex error" } } }); });
怎么样,是不是很酷啊!
$("#formSupplier").validate还有一些其他的参数,跟多的参数可以查看
http://blog.csdn.net/a497785609/article/details/5758613
在这里先介绍两个比较常用的。
errorElement
错误提示的html标签
submitHandler
验证成功之后的操作
$("#formSupplier").validate({ errorElement: "span", submitHandler: function (form) { if (btnType == 1) { submitUpdateSupplier(); } else { offShelf(); } }, rules: { txtSuUserName: { required: true, pattern: regexUsername } }, messages: { txtSuUserName: { required: "请填写编号!", pattern: "请注意,编号只能使用3-15位的字母组合!" } } });
原文地址:https://www.cnblogs.com/lcc1995/p/8118153.html
时间: 2024-10-24 14:31:33