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 参数传递的实际应用代码分析
Sep 13 Javascript
文本框的字数限制功能jquery插件
Nov 24 Javascript
js 金额文本框实现代码
Feb 14 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 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
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
jQuery总体架构的理解分析
2011/03/07 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
深入解析Python中的WSGI接口
2015/05/11 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
Python正则简单实例分析
2017/03/21 Python
python安装scipy的方法步骤
2019/06/26 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Python request使用方法及问题总结
2020/04/26 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
毕业生自荐书
2014/02/03 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
春节慰问信范文
2015/02/15 职场文书
七年级思品教学反思
2016/02/20 职场文书