JQuery Validator使用实例

来源：互联网发布：程序员网上接单编辑：程序博客网时间：2024/05/18 01:50

最近花时间看了看jQuery的validator插件，发现这个东西用来做web前端验证确实很不错，所以将例子记录下来，以备后用。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>JQuery Validator Demo</title><link rel="stylesheet" href="css/screen.css" type="text/css" /><script type="text/javascript" src="js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript">$(document).ready(function() {// 手机号码验证   jQuery.validator.addMethod("isMobile",function(value, element) {var length = value.length;return this.optional(element)|| (length == 11 && /^([1-9]{1}\d{10})$/.test(value));}, "请正确填写手机号码");// 数字验证   jQuery.validator.addMethod("isNumber",function(value, element) {var length = value.length;return this.optional(element)|| (/^[1-9]?[0-9]$/.test(value));}, "请正确填写年龄");$("#myForm").validate({rules : {username : {required : true,minlength : 6,remote : "test"},password : {required : true,remote : "test"},rePassword : {required : true,equalTo : "#password"},sex : "required",age : {required : true,isNumber : true},phone : {required : true,isMobile : true},email : {required : true}},messages : {username : {required : "请输入用户名",minlength : jQuery.format("用户名长度必须大于{0}."),remote : jQuery.format("用户名{0}已存在")},password : {required : "请输入密码",remote : "已存在"},rePassword : {required : "请再次输入密码",equalTo : "两次密码不一致"},sex : "请选择性别",age : {required : "请输入年龄"},phone : {required : "请输入手机号码"},email : {required : "请输入电子邮箱"}},errorPlacement : function(error, element) {if (element.is(":radio"))error.appendTo(element.next().next());else if (element.is(":checkbox"))error.appendTo(element.next());elseerror.appendTo(element.next());},submitHandler: function() {alert("submitted!");},success: function(label) {label.html(" ").addClass("checked");}});});</script><style type="text/css">#myForm label.error {background: url("images/unchecked.gif") no-repeat 0px 0px;padding-left: 16px;padding-bottom: 2px;font-weight: bold;color: #EA5200;}#myForm label.checked {background: url("images/checked.gif") no-repeat 0px 0px;}</style></head><body><form action="" id="myForm" style="padding: 50px 0 0 50px;"><fieldset><legend>请输入以下用户信息</legend><p><label for="username">用户名</label> <input id="username"name="username" type="text" /><label /></p><p><label for="password">密码</label> <input id="password"name="password" type="password" /><label /></p><p><label for="rePassword">重复密码</label> <input id="rePassword"name="rePassword" type="password" /><label /></p><p><label for="sex">性别</label> <input name="sex" type="radio" value="0">女<input name="sex" type="radio" value="1">男<label /></p><p><label for="age">年龄</label> <input id="age" name="age" type="text" /><label /></p><p><label for="phone">手机</label> <input id="phone" name="phone"type="text" /><label /></p><p><label for="email">电子邮箱</label> <input id="email" name="email"type="text" /><label /></p><p><input type="submit" value="提交"></p></fieldset></form></body></html>

项目中用到的js/css/images文件如下图

页面验证效果如下：

Html文件已上传 http://download.csdn.net/detail/samnalove/3976688