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


Posted in Javascript onJune 25, 2010

验证操作类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); 
} 
}
Javascript 相关文章推荐
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
javascript关于继承解析
May 10 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
基于jquery的checkbox下拉框插件代码
Jun 25 #Javascript
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 #Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 #Javascript
javascript面向对象编程(一) 实例代码
Jun 25 #Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 #Javascript
jQuery对象和DOM对象使用说明
Jun 25 #Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 #Javascript
You might like
php从字符串创建函数的方法
2015/03/16 PHP
PHP类的封装与继承详解
2015/09/29 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
初识Javascript小结
2015/07/16 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
js实现简单页面全屏
2019/09/17 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
scrapy爬虫完整实例
2018/01/25 Python
Django工程的分层结构详解
2019/07/18 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
python实现查找所有程序的安装信息
2020/02/18 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
高考考python编程是真的吗
2020/07/20 Python
甲方资料员岗位职责
2013/12/13 职场文书
小学运动会通讯稿
2015/07/18 职场文书
开学典礼校长致辞
2015/07/29 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
在 Python 中利用 Pool 进行多线程
2022/04/24 Python