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 相关文章推荐
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
vue 自定义组件添加原生事件
Apr 21 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 AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
php实现无限级分类实现代码(递归方法)
2011/01/01 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
PHP7 标准库修改
2021/03/09 PHP
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
实习护士自荐信
2014/06/21 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
2016年寒假见闻
2015/10/10 职场文书
实习报告范文
2019/07/30 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书