jQuery.Validate 使用笔记(jQuery Validation范例 )

更新时间：2010年06月25日 19:50:45 作者：

学习jQuery Validation，于是手写一公共范例，并收藏以便后用,里面附有测试代码，需要的朋友一起来测试。

验证操作类formValidatorClass.js

 
/** 
* @author ming 
*/ 
$(document).ready(function(){ 
/**//* 设置默认属性 */ 
$.validator.setDefaults({ 
submitHandler: function(form) { 
form.submit(); 
} 
}); 
// 字符验证 
jQuery.validator.addMethod("stringCheck", function(value, element) { 
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); 
}, "只能包括中文字、英文字母、数字和下划线"); 
// 中文字两个字节 
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { 
var length = value.length; 
for(var i = 0; i < value.length; i++){ 
if(value.charCodeAt(i) > 127){ 
length++; 
} 
} 
return this.optional(element) || ( length >= param[0] && length <= param[1] ); 
}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)"); 
// 身份证号码验证 
jQuery.validator.addMethod("isIdCardNo", function(value, element) { 
return this.optional(element) || isIdCardNo(value); 
}, "请正确输入您的身份证号码"); 
// 手机号码验证 
jQuery.validator.addMethod("isMobile", function(value, element) { 
var length = value.length; 
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; 
return this.optional(element) || (length == 11 && mobile.test(value)); 
}, "请正确填写您的手机号码"); 
// 电话号码验证 
jQuery.validator.addMethod("isTel", function(value, element) { 
var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678 
return this.optional(element) || (tel.test(value)); 
}, "请正确填写您的电话号码"); 
// 联系电话(手机/电话皆可)验证 
jQuery.validator.addMethod("isPhone", function(value,element) { 
var length = value.length; 
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; 
var tel = /^\d{3,4}-?\d{7,9}$/; 
return this.optional(element) || (tel.test(value) || mobile.test(value)); 
}, "请正确填写您的联系电话"); 
// 邮政编码验证 
jQuery.validator.addMethod("isZipCode", function(value, element) { 
var tel = /^[0-9]{6}$/; 
return this.optional(element) || (tel.test(value)); 
}, "请正确填写您的邮政编码"); 
//开始验证 
$('#submitForm').validate({ 
/**//* 设置验证规则 */ 
rules: { 
username: { 
required:true, 
stringCheck:true, 
byteRangeLength:[3,15] 
}, 
email:{ 
required:true, 
email:true 
}, 
phone:{ 
required:true, 
isPhone:true 
}, 
address:{ 
required:true, 
stringCheck:true, 
byteRangeLength:[3,100] 
} 
}, 
/**//* 设置错误信息 */ 
messages: { 
username: { 
required: "请填写用户名", 
stringCheck: "用户名只能包括中文字、英文字母、数字和下划线", 
byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)" 
}, 
email:{ 
required: "请输入一个Email地址", 
email: "请输入一个有效的Email地址" 
}, 
phone:{ 
required: "请输入您的联系电话", 
isPhone: "请输入一个有效的联系电话" 
}, 
address:{ 
required: "请输入您的联系地址", 
stringCheck: "请正确输入您的联系地址", 
byteRangeLength: "请详实您的联系地址以便于我们联系您" 
} 
}, 
/**//* 设置验证触发事件 */ 
focusInvalid: false, 
onkeyup: false, 
/**//* 设置错误信息提示DOM */ 
errorPlacement: function(error, element) { 
error.appendTo( element.parent()); 
}, 
}); 
}); 

测试页index.html

复制代码代码如下:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
<title>jQuery验证</title> 
<script src="lib/jquery/jquery-1.3.2.min.js" ></script> 
<script type="text/javascript" src="lib/jquery/jquery.validate.js" mce_src="lib/jquery/jquery.validate.js"></script> 
<script type="text/javascript" src="lib/jquery/messages_cn.js"></script> 
<script type="text/javascript" src="lib/jquery/formValidatorClass.js"></script> 
<style type="text/css"> 
* {}{ 
font-family: Verdana; 
font-size: 96%; 
} 
label {}{ 
width: 10em; 
float: left; 
} 
label.error {}{ 
float: none; 
color: red; 
padding-left: .5em; 
vertical-align: top; 
} 
p {}{ 
clear: both; 
} 
.submit {}{ 
margin-left: 12em; 
} 
em {}{ 
font-weight: bold; 
padding-right: 1em; 
vertical-align: top; 
} 
</style> 
</head> 
<body> 
<form class="submitForm" id="submitForm" method="get" action=""> 
<fieldset> 
<legend>表单验证</legend> 
<p> 
<label for="username">用户名</label> 
<em>*</em><input id="userName" name="username" size="25" /> 
</p> 
<p> 
<label for="email">E-Mail</label> 
<em>*</em><input id="email" name="email" size="25" /> 
</p> 
<p> 
<label for="phone">联系电话</label> 
<em>*</em><input id="phone" name="phone" size="25" value="" /> 
</p> 
<p> 
<label for="address">地址</label> 
<em>*</em><input id="address" name="address" size="22"> 
</p> 
<input class="submit" type="submit" value="提交"/> 
</p> 
</fieldset> 
</form> 
</body> 
</html> 

校验规则参数
格式为; name:{rule1, rule2 ....} name 要使用input 标签的name，之前，错误理解为 ID 了；
提示信息使用 alert 输出:

复制代码代码如下:

 
errorPlacement: function (error, element) { 
if (error[0].textContent){ 
Alert(error[0].textContext); 
} 
else { 
Alert(error[0].innerText); 
} 
} 

您可能感兴趣的文章:

Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
这篇文章主要介绍了Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结,本文总结的比较简洁直白,看到的朋友按需索取,需要的朋友可以参考下
2015-04-04
jQuery过滤选择器用法分析
这篇文章主要介绍了jQuery过滤选择器用法,实例分析了:first、:last、:odd、:even等等常用的过滤选择器的使用技巧,非常具有实用价值,需要的朋友可以参考下
2015-02-02
jQuery实现的移动端图片缩放功能组件示例
这篇文章主要介绍了jQuery实现的移动端图片缩放功能组件,结合实例形式详细分析了jQuery基于移动端的图片缩放功能组件实现原理、步骤、核心代码及使用技巧,需要的朋友可以参考下
2020-05-05
Jquery判断页面图片是否加载失败的代码
这篇文章主要介绍了Jquery判断页面图片是否加载失败,加载失败则显示默认图片的实现方法,需要的朋友可以参考下
2023-06-06
jquery控制背景音乐开关与自动播放提示音的方法
这篇文章主要介绍了jquery控制背景音乐开关与自动播放提示音的方法,实例分析了背景音乐开关的技巧与自动播放提示音的常见用法,非常具有实用价值,需要的朋友可以参考下
2015-02-02
jQuery ajax调用webservice注意事项
这篇文章主要为大家详细介绍了jQuery ajax调用webservice的注意事项，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
jquery动态加载图片数据练习代码
这里我只是随便做了下，上面是照片列表和两个按钮，单击小图片下面显示大图片，当点击按钮时可以查看下一页，上一页的图片。
2011-08-08
浅谈jquery拼接字符串效率比较高的方法
下面小编就为大家带来一篇浅谈jquery拼接字符串效率比较高的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
JQuery获取表格数据示例代码
这篇文章主要介绍了通过JQuery如何获取表格数据，下面有个不错的示例，大家可以参考下
2014-05-05
jQuery Validate表单验证深入学习
这篇文章主要介绍了jQuery Validate表单验证入门知识，该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API，感兴趣的小伙伴们可以参考一下
2015-12-12