jquery 最简单易用的表单验证插件


Posted in Javascript onFebruary 27, 2010
/* 
Jquery 表单验证插件 
janchie 2010.1 janchie@163.com 
1.01版 
*/ 
(function($){ 
$.fn.extend({ 
valid:function(){ 
if( ! $(this).is("form") ) return; 
//获取参数 
var items = $.isArray(arguments[0]) ? arguments[0] : [], 
isBindSubmit = typeof arguments[1] ==="boolean" ? arguments[1] :true, 
isAlert = typeof arguments[2] ==="boolean" ? arguments[2] :false, 
//验证规则 
rule = { 
// 正则规则 
"eng" : /^[A-Za-z]+$/, 
"chn" :/^[\u0391-\uFFE5]+$/, 
"mail" : /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/, 
"url" : /^http[s]?:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/, 
"currency" : /^\d+(\.\d+)?$/, 
"number" : /^\d+$/, 
"int" : /^[0-9]{1,30}$/, 
"double" : /^[-\+]?\d+(\.\d+)?$/, 
"username" : /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/, 
"password" : /^(\w){6,20}$/, 
"safe" : />|<|,|\[|\]|\{|\}|\?|\/|\+|=|\||\'|\\|\"|:|;|\~|\!|\@|\#|\*|\$|\%|\^|\&|\(|\)|`/i, 
"dbc" : /[a-zA-Z0-9!@#¥%^&*()_+{}[]|:"';.,/?<>`~ ]/, 
"qq" : /[1-9][0-9]{4,}/, 
"date" : /^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/, 
"year" : /^(19|20)[0-9]{2}$/, 
"month" : /^(0?[1-9]|1[0-2])$/, 
"day" : /^((0?[1-9])|((1|2)[0-9])|30|31)$/, 
"hour" : /^((0?[1-9])|((1|2)[0-3]))$/, 
"minute" : /^((0?[1-9])|((1|5)[0-9]))$/, 
"second" : /^((0?[1-9])|((1|5)[0-9]))$/, 
"mobile" : /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/, 
"phone" : /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/, 
"zipcode" : /^[1-9]\d{5}$/, 
"bodycard" : /^((1[1-5])|(2[1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|71|(8[12])|91)\d{4}((19\d{2}(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(19\d{2}(0[13578]|1[02])31)|(19\d{2}02(0[1-9]|1\d|2[0-8]))|(19([13579][26]|[2468][048]|0[48])0229))\d{3}(\d|X|x)?$/, 
"ip" : /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/, 
"file": /^[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/, 
"image" : /.+\.(jpg|gif|png|bmp)$/i, 
"word" : /.+\.(doc|rtf|pdf)$/i, 
// 函数规则 
"eq": function(arg1,arg2){ return arg1==arg2 ? true:false;}, 
"gt": function(arg1,arg2){ return arg1>arg2 ? true:false;}, 
"gte": function(arg1,arg2){ return arg1>=arg2 ? true:false;}, 
"lt": function(arg1,arg2){ return arg1<arg2 ? true:false;}, 
"lte": function(arg1,arg2){ return arg1<=arg2 ? true:false;} 
}, 
//简单验证提示信息后缀 
msgSuffix = { 
"eng" : "只能输入英文" , 
"chn" : "只能输入汉字", 
"mail" : "格式不正确", 
"url" : "格式不正确", 
"currency" : "数字格式有误", 
"number" : "只能为数字", 
"int" : "只能为整数", 
"double" : "只能为带小数的数字", 
"username" :"只能为数字和英文及下划线和.的组合,开头为字母,4-20个字符", 
"password" : "只能为数字和英文及下划线的组合,6-20个字符", 
"safe" : "不能有特殊字符", 
"dbc" : "不能有全角字符", 
"qq" : "格式不正确", 
"date" : "格式不正确", 
"year" : "不正确", 
"month" :"不正确", 
"day" : "不正确", 
"hour" : "不正确", 
"minute" :"不正确", 
"second" :"不正确", 
"mobile" : "格式不正确", 
"phone" : "格式不正确", 
"zipcode" : "格式不正确", 
"bodycard" : "格式不正确", 
"ip" : "IP不正确", 
"file": "类型不正确", 
"image" : "类型不正确", 
"word" : "类型不正确", 
"eq": "不等于", 
"gt": "不大于", 
"gte": "不大于或等于", 
"lt": "不小于", 
"lte": "不小于或等于" 
}, 
msg = "", formObj = $(this) , checkRet = true, isAll, 
tipname = function(namestr){ return "tip_" + namestr.replace(/([a-zA-Z0-9])/g,"-$1"); }, 
//规则类型匹配检测 
typeTest = function(){ 
var result = true,args = arguments; 
if(rule.hasOwnProperty(args[0])){ 
var t = rule[args[0]], v = args[1]; 
result = args.length>2 ? t.apply(arguments,[].slice.call(args,1)):($.isFunction(t) ? t(v) :t.test(v)); 
} 
return result; 
}, 
//错误信息提示 ****** 自定义修改 ****** 
showError = function(fieldObj,filedName,warnInfo){ 
checkRet = false; 
fieldObj.css("background","#FFDFDD"); 
var tipObj = $("#"+tipname(filedName)); 
if(tipObj.length>0) tipObj.remove(); 
var tipPosition = fieldObj.next().length>0 ? fieldObj.nextAll().eq(this.length-1):fieldObj.eq(this.length-1); 
tipPosition.after("<span style='color:#F06' id='"+tipname(filedName)+"'> "+warnInfo+" </span>"); 
if(isAlert && isAll) msg += "\n" + warnInfo; 
//if(isAlert && !isAll) alert(warnInfo); 
}, 
//正确信息提示 ****** 自定义修改 ****** 
showRight = function(fieldObj,filedName){ 
fieldObj.css("background","#CCFFCC"); 
var tipObj = $("#"+tipname(filedName)); 
if(tipObj.length>0) tipObj.remove(); 
var tipPosition = fieldObj.next().length>0 ? fieldObj.nextAll().eq(this.length-1):fieldObj.eq(this.length-1); 
tipPosition.after("<span style='color:#0C0' id='"+tipname(filedName)+"'> 正确 </span>"); 
}, 
//匹配对比值的提示名 
findTo = function(objName){ 
var find; 
$.each(items, function(){ 
if(this.name == objName && this.simple){ 
find = this.simple; return false; 
} 
}); 
if(!find) find = $("[name='"+objName+"']")[0].name; 
return find; 
}, 
//单元素验证 
fieldCheck = function(item){ 
var i = item, field = $("[name='"+i.name+"']",formObj[0]); 
if(!field[0]) return; 
var warnMsg,fv = $.trim(field.val()),isRq = typeof i.require ==="boolean" ? i.require : true; 
if( isRq && ((field.is(":radio")|| field.is(":checkbox")) && !field.is(":checked"))){ 
warnMsg = i.message|| i.simple + "没有选择"; 
showError(field ,i.name, warnMsg); 
}else if (isRq && fv == "" ){ 
warnMsg = i.message|| i.simple + ( field.is("select") ? "没有选择" :"不能为空" ); 
showError(field ,i.name, warnMsg); 
}else if(fv != ""){ 
if(i.min || i.max){ 
var len = fv.length, min = i.min || 0, max = i.max; 
warnMsg = i.message || (max? i.simple + "长度范围应在"+min+"~"+max+"之间":i.simple + "长度应大于"+min); 
if( (max && (len>max || len<min)) || (!max && len<min) ){ 
showError(field ,i.name, warnMsg); return; 
} 
} 
if(i.type){ 
var matchVal = i.to ? $.trim($("[name='"+i.to+"']").val()) :i.value; 
var matchRet = matchVal ? typeTest(i.type,fv,matchVal) :typeTest(i.type,fv); 
warnMsg = i.message|| i.simple + msgSuffix[i.type]; 
if(matchVal && i.simple) warnMsg += (i.to ? findTo(i.to) +"的值" :i.value); 
if(!matchRet) showError(field ,i.name, warnMsg); 
else showRight(field,i.name); 
}else{ 
showRight(field,i.name); 
} 
}else if (isRq){ 
showRight(field,i.name); 
} 
}, 
//元素组验证 
validate = function(){ 
$.each(items, function(){isAll=true; fieldCheck(this);}); 
if(isAlert && msg != ""){ 
alert(msg); msg = ""; 
} 
return checkRet; 
}; 
//单元素事件绑定 
$.each(items, function(){ 
var field = $("[name='"+this.name+"']",formObj[0]); 
if(field.is(":hidden")) return; 
var obj = this,toCheck = function(){ isAll=false; fieldCheck(obj);}; 
if(field.is(":file") || field.is("select")){ 
field.change(toCheck); 
}else{ 
field.blur(toCheck); 
} 
}); 
//提交事件绑定 
if(isBindSubmit) { 
$(this).submit(validate); 
}else{ 
return validate(); 
} 
} 
}); 
})(jQuery);

参数及说明:
------------------- 配置参数:----------------------
-------- 表单 --------
valid(fileds,isBindSubmit,isAlert)
参数一为表单项数组(Json方式),必需
参数二为表单是否为手动调用验证结果,默认为true,即为自动验证submit事件,可选;
参数三为验证信息采用Alert提示方式,默认为否,可选。
-------- 表单项数组 --------
name: 表单域的name,必需
type: 验证类型,可选
simple: 简单提示消息,只输入域的中文名 [推荐]
message: 完整的提示消息,替代简单提示消息
require:是否必填,默认为true,即必填,false为非必填,可选
to: 匹配值对比,对象的name,可选
value: 直接匹配值对比,有to则该值被忽略,可选
min:最小长度,可选
max:最大长度,可选
ajax: 为取得异步验证的结果的地址,可选
****** type验证类型如下: ******
eng: 英文
chn: 汉字
mail: 邮箱
url: 网址
currency: 货币
number: 数字
int: 整数
double: 浮点数
username:数字和英文及下划线和.的组合,开头为字母,4-20个字符
password: 数字和英文及下划线的组合,6-20个字符
safe:不含特殊字符
dbc: 含全角字符(汉字除外)
qq: 5-9位数字
date: 时间
year: 年
month:月
day: 日
hour: 小时
minute:分
second 秒
mobile:手机
phone:电话
zipcode: 邮编
bodycard: 身份证,支持15位、18位,x字母
ip: IP
file: 文件类型
image: 图片文件类型
word: 文档文件类型
**** 以下类型,需要有匹配对象或值 ****
eq: =
gt: >
gte:>=
lt: <
lte:<=
怎么个简单容易法???
看代码:
$(function(){ 
$("form").valid([ 
//验证选择 
{ name:"checkbox",simple:"多选" }, 
//验证必填,只要不为空 
{ name:"username",simple:"用户名" }, 
//非必填,邮箱类型 
{ name:"email",type:"mail",simple:"邮箱",require:false } 
]); 
})

演示代码打包下载 http://xiazai.3water.com/201002/yuanma/jquery_checkform.rar
Javascript 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
js对象的复制继承实例
Jan 10 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
纯js实现手风琴效果
Apr 17 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 #Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 #Javascript
JavaScript 空位补零实现代码
Feb 26 #Javascript
javascript replace()正则替换实现代码
Feb 26 #Javascript
javascript function调用时的参数检测常用办法
Feb 26 #Javascript
jquery1.4 教程二 ajax方法的改进
Feb 25 #Javascript
jquery 1.4.2发布!主要是性能与API
Feb 25 #Javascript
You might like
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
javascript 面向对象 function类
2010/05/13 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
商场拾金不昧表扬信
2014/01/13 职场文书
合伙协议书范本
2014/04/21 职场文书
代理人委托书
2014/08/01 职场文书
2014年导购员工作总结
2014/11/18 职场文书
优秀教师推荐材料
2014/12/16 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书