demo下载链接http://pan.baidu.com/s/1hrDCC3y
 
 
/* 
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]|1d|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}-))?13d{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}((19d{2}(0[13-9]|1[012])(0[1-9]|[12]d|30))|(19d{2}(0[13578]|1[02])31)|(19d{2}02(0[1-9]|1d|2[0-8]))|(19([13579][26]|[2468][048]|0[48])0229))d{3}(d|X|x)?$/, 
"ip" : /^(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|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 } 
]); 
}) 
 
 
 
网摘示例代码
<script language="javascript" src="jquery-1.4.min.js"></script>
<script language="javascript" src="jquery.checkform.js"></script>
<script language="javascript">
$(function(){ $("#form1").valid([
//{ name:"username",type:"ajax",message:"用户名没有注册", url:"abc.asp" },
{ name:"username",type:"username",simple:"用户名"},
{ name:"password",type:"password",simple:"密码",min:8,max:16},
{ name:"password2",type:"eq",simple:"重复密码", to:"password" },
{ name:"english",type:"eng",simple:"英文域", require:false },
{ name:"chinese",type:"chn",simple:"中文域", require:false },
{ name:"email",type:"mail",simple:"邮箱" },
{ name:"url",type:"url",message:"地址信息不正确哦!" },
{ name:"checkbox",simple:"多选" },
{ name:"select",simple:"选择框" },
]); })
</script> </head> <body> <form id="form1" name="form1" method="post" action="">
<table width="760" border="0">
<tr>
<td width="90" align="right">用户名</td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td align="right">密码</td>
<td><input type="password" name="password" id="password" /></td>
</tr>
<tr>
<td align="right">重复密码</td>
<td><input type="password" name="password2" id="password2" /></td>
</tr>
<tr>
<td align="right">英文</td>
<td><input type="text" name="english" id="english" /></td>
</tr>
<tr>
<td align="right">中文</td>
<td><input type="text" name="chinese" id="chinese" /></td>
</tr>
<tr>
<td align="right">邮箱</td>
<td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td align="right">网址</td>
<td><input type="text" name="url" id="url" /></td>
</tr>
<tr>
<td align="right">金额</td>
<td><input type="text" name="currency" id="currency" /></td>
</tr>
<tr>
<td align="right">数字</td>
<td><input type="text" name="number" id="number" /></td>
</tr>
<tr>
<td align="right">整数</td>
<td>
<input type="text" name="int" id="int" />
</td>
</tr>
<tr>
<td align="right">小数</td>
<td><input type="text" name="double" id="double" /></td>
</tr>
<tr>
<td align="right">QQ</td>
<td><input type="text" name="qq" id="qq" /></td>
</tr>
<tr>
<td align="right">时间</td>
<td><input type="text" name="date" id="date" /></td>
</tr>
<tr>
<td align="right">年</td>
<td><input type="text" name="year" id="year" /></td>
</tr>
<tr>
<td align="right">月</td>
<td><input type="text" name="month" id="month" /></td>
</tr>
<tr>
<td align="right">日</td>
<td><input type="text" name="day" id="day" /></td>
</tr>
<tr>
<td align="right">小时</td>
<td><input type="text" name="hour" id="hour" /></td>
</tr>
<tr>
<td align="right">分/秒</td>
<td><input type="text" name="stime" id="stime" /></td>
</tr>
<tr>
<td align="right">电话号码</td>
<td><input type="text" name="telphone" id="telphone" /></td>
</tr>
<tr>
<td align="right">手机</td>
<td><input type="text" name="mobile" id="mobile" /></td>
</tr>
<tr>
<td align="right">身份证</td>
<td><input type="text" name="idcard" id="idcard" /></td>
</tr>
<tr>
<td align="right">邮编</td>
<td><input type="text" name="zipcode" id="zipcode" /></td>
</tr>
<tr>
<td align="right">IP</td>
<td><input type="text" name="ip" id="ip" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="radio" name="radio" id="radio" value="1" />
<label>项1</label>
<input type="radio" name="radio" id="radio2" value="2" />
<label>项2</label>
<input type="radio" name="radio" id="radio3" value="3" />
<label>项3</label> </td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input name="checkbox" type="checkbox" id="checkbox" value="1" />
<label>项1</label>
<input name="checkbox" type="checkbox" id="checkbox2" value="2" />
<label>项2</label>
<input name="checkbox" type="checkbox" id="checkbox3" value="3" />
<label>项3</label></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><select name="select" id="select">
<option value="">请选择</option>
<option value="1">项一</option>
<option value="2">项二</option>
</select>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><textarea name="textarea" id="textarea" cols="40" rows="3"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="button" id="button" value="Submit" />
<input type="reset" name="button2" id="button2" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>

jquery formcheck.js的更多相关文章

  1. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  2. jQuery.template.js 简单使用

    之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...

  3. 修改 jquery.validate.js 支持非form标签

    尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...

  4. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  5. 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)

    js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...

  6. 初探jquery.slimscroll.js和iscroll5.js

    网上关于实现各种滚动效果的插件不胜枚举,这里,我简单介绍一下自己用过的两款比较有代表性的插件: 1.jquery.slimscroll.js,需要先引入jquery类库,主要用于模拟传统的浏览器滚动条 ...

  7. 动态生成二维码插件 jquery.qrcode.js

    前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...

  8. Jquery客户端校验——jquery.validate.js

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

  9. 懒加载插件- jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

随机推荐

  1. poj 2480 Longge&#39;s problem 积性函数性质+欧拉函数

    题意: 求f(n)=∑gcd(i, N) 1<=i <=N. 分析: f(n)是积性的数论上有证明(f(n)=sigma{1<=i<=N} gcd(i,N) = sigma{d ...

  2. RecipientsEditor-信息收件人输入框

    首先说一下信息收件人这个类的继承关系 RecipientsEditor->EncapsulatedMTKRecipientEditTextView(这两个类都在mms目录下) ->MTKR ...

  3. Android学习笔记进阶20之得到图片的缩略图

    <1>简介 之前往往是通过Bitmap.Drawable和Canvas配合完成,需要写一系列繁杂的逻辑去缩小原有图片,从而得到缩略图. 现在我给大家介绍一种比较简单的方法:(网上有) 在A ...

  4. matlab 构建数据集实用 api

    我们当前有如下目录结构的图像数据集(用于图像分类): 1. imageDatastore imageDatastore:imds = imageDatastore('./images', 'Inclu ...

  5. HDU4825 Xor Sum(贪心+Trie树)

    Problem Description Zeus 和 Prometheus 做了一个游戏,Prometheus 给 Zeus 一个集合,集合中包含了N个正整数,随后 Prometheus 将向 Zeu ...

  6. js进阶 14 jquery的ajax有哪些函数和事件(多练)

    js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...

  7. SSH进阶(2)——用Struts拦截器实现登陆限制

    拦截器从字面意思来看就是限制.限制用户訪问某些网页.在Action提出请求之前用拦截器来做权限设置,让符合的用户跳入对应的界面中.近期做的一个商城项目中就用到了自己定义的拦截器,实现了一个简单的ses ...

  8. 详解javascript的深拷贝与浅拷贝

    1. 认识深拷贝和浅拷贝 javascript中一般有按值传递和按引用传递两种复制,按值传递的是基本数据类型(Number,String,Boolean,Null,Undefined),一般存放于内存 ...

  9. Javascript和jquery事件--事件监听器

    之前看完了js和jq的冒泡捕获和事件对象event,这里看看同时使用js和jq后我最容易混淆的监听器的绑定. (1) js的监听器绑定解绑 绑定监听器有两种方式: a.on-事件type,比如oncl ...

  10. Redis学习笔记--String(四)

    Redis的第一个数据类型string 1.命令 1.1赋值 语法:SET key value Set key value; > OK 1.2取值 语法:GET key > get tes ...