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+xml自动生成表格的东西
Dec 21 Javascript
JS面向对象编程之对象使用分析
Aug 19 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 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
用session做客户验证时的注意事项
2006/10/09 PHP
php采集速度探究总结(原创)
2008/04/18 PHP
php取得字符串首字母的方法
2015/03/25 PHP
javaScript中push函数用法实例分析
2015/06/08 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
医科学校毕业生自荐信
2013/11/09 职场文书
业务经理岗位职责
2013/11/11 职场文书
医院信息公开实施方案
2014/05/09 职场文书
服务承诺书范文
2014/05/19 职场文书
高一军训的心得体会
2014/09/01 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
学生会部长竞选稿
2015/11/19 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
生产实习心得体会范文
2016/01/22 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
商业计划书之服装
2019/09/09 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang