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 prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
jquery 学习笔记一
Apr 07 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
基于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 fckeditor 调用的函数
2009/06/21 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
php注册登录系统简化版
2020/12/28 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
python删除文件示例分享
2014/01/28 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
pytest中文文档之编写断言
2019/09/12 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
三好学生事迹材料
2014/12/24 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书