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 相关文章推荐
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
JavaScript中的各种宽高属性的实现
May 08 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
mysql数据库差异比较的PHP代码
2012/02/05 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
php实现的生成排列算法示例
2019/07/25 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
在Python中处理时间之clock()方法的使用
2015/05/22 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
医院总经理职责
2013/12/26 职场文书
《日月潭》教学反思
2014/02/28 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
简单聊聊Golang中defer预计算参数
2022/03/25 Golang
Android Studio 计算器开发
2022/05/20 Java/Android