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

复制代码 代码如下:

/*
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.jb51.net/201002/yuanma/jquery_checkform.rar

时间: 2024-09-15 17:14:22

jquery 最简单易用的表单验证插件_jquery的相关文章

jquery validate表单验证插件_jquery

对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百

功能强大的jquery.validate表单验证插件_jquery

本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示   2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1).html表单结构:包含需要校验的表单元素: 2).js逻辑控制:在需要校验的表单元素上绑定事件,如点

jquery自定义表单验证插件_jquery

本文实例为大家分享了jquery表单验证插件,供大家参考,具体内容如下 //正则表达式 var map = new Map(); map.put("*", /[\w\W]+/); map.put("*6-16", /^[\w\W]{6,16}$/); map.put("n", /^\d+$/); map.put("n6-16", /^\d{6,16}$/); map.put("s", /^[\u4E00-\

jValidate 基于jQuery的表单验证插件_jquery

网上的各类表单验证插件的验证规则都是写在脚本里的,但我的插件的验证规则却是写在表单元素的属性里的.如下面的例子: 复制代码 代码如下: <input name="name" type="text" id="name" size="30" jvpattern="^.+$" jverrortip="请输入正确的姓名." jvtipid="spt_name" jvme

易操作的jQuery表单提示插件_jquery

本文实例讲述了一款轻量级的表单提示插件---jQuery Form Toolltip.分享给大家供大家参考.具体如下: jQuery Form Toolltip 特点: 你可以单独自定义提示信息的CSS样式. 你可以指定淡入淡出的方向,当前支持Top, Bottom, Right 和 Left 运行效果截图如下: 具体代码如下: jquery实例:jQuery Form Toolltip使用方法引入核心文件 <script src="js/jquery/2.1.1/jquery.min.j

一款比较实用齐全的jQuery表单验证插件

一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网址,数字,AJAX用户名验证以及自定义的正则等等几乎所有我们要用到的验证. 不多说,看DEMO吧:点些下载 如何使用? 第一步,当然是和使用其他jQuery插件一样,引入插件文件vanadium.js;第二步,根据你表单要使用的验证方法,在你的表单中加入对应的验证挂钩.比如你想使下面的表单为必填项:

jquery表单验证插件(jquery.validate.js)的3种使用方式

这篇文章主要介绍了jquery表单验证插件(jquery.validate.js)的3种使用方式,本文用详细的代码实例讲解jquery表单验证插件的使用,需要的朋友可以参考下     jquery 验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery 插件和 jquery 验证插件: 第一步:引入插件 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js

JQuery表单验证插件EasyValidator用法分析_jquery

本文实例讲述了JQuery表单验证插件EasyValidator用法.分享给大家供大家参考.具体如下: 本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对不同用户特殊需求,自行写正则吧. EasyValidator实现的功能: 1.提示功能(在表单或者其他标签中加入tip="想提示的文字") 如: 复制代码 代码如下: <inp

基于Jquery的FormValidator表单验证插件

包含了以下验证功能: 1.控件值不能为空 2.控件值长度限制 3.选中项数量限制 4.控件值范围限制 5.控件值类型限制 6.控件值格式化 7.两个控件值比较 8.自定义验证方法 9.下拉必选 10.表单验证方式 11.控件独自验证 看一个简单的表单用户名验证插件  代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D