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 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
jquery实现上传图片功能
Jun 29 jQuery
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
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
提高网站信任度的技巧
2008/10/17 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
浅析JavaScript动画
2015/06/10 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
python提取字典key列表的方法
2015/07/11 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
介绍一下RMI的基本概念
2016/12/17 面试题
产品工艺师的岗位职责
2013/11/15 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
民族精神月活动总结
2014/08/28 职场文书
详解Python如何批量采集京东商品数据流程
2022/01/22 Python