基于Jquery的标签智能验证实现代码


Posted in Javascript onDecember 27, 2010

后经过一段对Jquery的学习,Jquery的强大解决了辅助代码过多不易维护的问题。
AutoValidate.JS

/// <reference path="../Scripts/jquery-1.4.1-vsdoc.js" /> 
//验证方法 v1.0,创建于2010-12-9 完成2010-12-16 MR.X 制 
//修改2010-12-10、2010-12-12、2010-12-15、2010-12-16添入信息提示动画效果 
//支持 type=text type=checkbox type=radio select 标签验证 
//vld="***"必填 格式验证 
//vld="n***"选填 格式验证 
//err="***"错误显示内容 
//super="y"用<span>追加提示信息,要用y以外字母得修改同级一组验证,同级一组的标签可以在第一个标签进行super="y"属性标识,其它不用 
//len="***"长度限制,用于textarea标签 
//<input id="***" type="text" vld="***" err="***" span="***" len="***"/> 
$(function () { 
//正则匿名对象 
var strRegex = {}; 
//错误信息匿名对象 
var strError = {}; 
//正确信息匿名对象 
var strRight = {}; 
/** 参数配置 start **/ 
//非空 
strRegex.NoNull = /[^\s]+/; 
strError.NoNull = "请填写内容,如123、中国!"; 
//邮箱 
strRegex.Email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/; 
strError.Email = "请核对邮箱格式,如china@163.com!"; 
//网址 
strRegex.Url = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^\"\"])*$/; 
strError.Url = "请核对网址格式,如https://3water.com!"; 
//账号 
strRegex.An = /^([a-zA-Z0-9]|[_]){6,16}$/; 
strError.An = "请核对账号格式,如china_56!"; 
//数字 
strRegex.Math = /\d+$/; 
strError.Math = "请核对数字格式,如1234!"; 
//年龄 
strRegex.Age = /^\d{2}$/; 
strError.Age = "请核对年龄格式,10~99岁之间!"; 
//邮编 
strRegex.Post = /^[1-9]\d{5}$/; 
strError.Post = "请核对邮编格式,如150001!"; 
//电话 
strRegex.Phone = /^((\d{11})|((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})))$/; 
strError.Phone = "请核对电话格式,如15546503251!"; 
//身份证 
strRegex.Card = /^(([1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[X,x]))|([1-9]\d{5}[1-9]\d{1}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])(\d{3})))$/; 
strError.Card = "请核对身份证格式,如230103190001010000!"; 
//金钱 
strRegex.Price = /^([1-9]\d*|0)(\.\d+)?$/; 
strError.Price = "请核对金钱格式,如99.98!"; 
//日期 
strRegex.Date = /((^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(10|12|0?[13578])([-\/\._])(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(11|0?[469])([-\/\._])(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(0?2)([-\/\._])(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([3579][26]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][13579][26])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][13579][26])([-\/\._])(0?2)([-\/\._])(29)$))/; 
strError.Date = "请核对日期格式,如1999.9.9、1999-9-9、1999.09.09!"; 
//时间 
strRegex.Time = /^([0-9]|[0-1][0-9]|[2][0-3])(:|:)([0-5][0-9])$/; 
strError.Time = "请核对时间格式,如23:59!"; 
strError.Length = "请核对输入信息长度,长度小于"; 
strRight.Info = "格式正确!"; //可以设置为空 
//下拉框 
strRegex.DDL = "请选择"; 
strError.DDL = "请选择选项"; 
//单个checkbox复选框 
strRegex.Check = "请选择"; 
strError.Check = "请选择选项"; 
//单个radio复选框 
strRegex.Radio = "请选择"; 
strError.Radio = "请选择选项"; 
//同级一组checkbox复选框 
strRegex.CheckGroup = "请选择"; 
strError.CheckGroup = "请选择选项"; 
//同级一组radio复选框 
strRegex.RadioGroup = "请选择"; 
strError.RadioGroup = "请选择选项"; 
//在标签后面追加信息 
var SpanError = "<span class='vldSpanErr'><img src='" + FilePath() + "images/error.gif' /></span>"; 
var SpanOk = "<span class='vldSpanRig'><img src='" + FilePath() + "images/ok.gif' /></span>"; 
/** 参数配置 end **/ 
/** Main **/ 
//文件目录,回返最顶级目录 ../ 
function FilePath() { 
var file = ""; 
var path = window.location.pathname.split('/'); 
$(path).each(function () { 
file = "../" + file; 
}); 
return file; 
} 
//页验证自检 
$("#form1 [vld]").blur(function () { 
RegexGether($(this)); 
}); 
//验证处理集合 
function RegexGether($ctrl) { 
switch ($ctrl.attr("vld")) { 
case "nonull": 
RegexNull($ctrl); 
break; 
case "age": 
RegexInputTextAll($ctrl, strRegex.Age, strError.Age); 
break; 
case "nage": 
RegexInputTextOnly($ctrl, strRegex.Age, strError.Age); 
break; 
case "date": 
RegexInputTextAll($ctrl, strRegex.Date, strError.Date); 
break; 
case "ndate": 
RegexInputTextOnly($ctrl, strRegex.Date, strError.Date); 
break; 
case "price": 
RegexInputTextAll($ctrl, strRegex.Price, strError.Price); 
break; 
case "nprice": 
RegexInputTextOnly($ctrl, strRegex.Price, strError.Price); 
break; 
case "email": 
RegexInputTextAll($ctrl, strRegex.Email, strError.Email); 
break; 
case "nemail": 
RegexInputTextOnly($ctrl, strRegex.Email, strError.Email); 
break; 
case "post": 
RegexInputTextAll($ctrl, strRegex.Post, strError.Post); 
break; 
case "npost": 
RegexInputTextOnly($ctrl, strRegex.Post, strError.Post); 
break; 
case "card": 
RegexInputTextAll($ctrl, strRegex.Card, strError.Card); 
break; 
case "ncard": 
RegexInputTextOnly($ctrl, strRegex.Card, strError.Card); 
break; 
case "time": 
RegexInputTextAll($ctrl, strRegex.Time, strError.Time); 
break; 
case "ntime": 
RegexInputTextOnly($ctrl, strRegex.Time, strError.Time); 
break; 
case "math": 
RegexInputTextAll($ctrl, strRegex.Math, strError.Math); 
break; 
case "nmath": 
RegexInputTextOnly($ctrl, strRegex.Math, strError.Math); 
break; 
case "url": 
RegexInputTextAll($ctrl, strRegex.Url, strError.Url); 
break; 
case "nurl": 
RegexInputTextOnly($ctrl, strRegex.Url, strError.Url); 
break; 
case "an": 
RegexInputTextAll($ctrl, strRegex.An, strError.An); 
break; 
case "nan": 
RegexInputTextOnly($ctrl, strRegex.An, strError.An); 
break; 
case "phone": 
RegexInputTextAll($ctrl, strRegex.Phone, strError.Phone); 
break; 
case "nphone": 
RegexInputTextOnly($ctrl, strRegex.Phone, strError.Phone); 
break; 
case "ddl": 
RegexSelect($ctrl); 
break; 
case "check": 
RegexInputCheckBoxRadioOnly($ctrl, strError.Check); 
break; 
case "radio": 
RegexInputCheckBoxRadioOnly($ctrl, strError.Radio); 
break; 
case "checkgroup": 
RegexInputCheckBoxRadioAll($ctrl, strError.CheckGroup); 
break; 
case "radiogroup": 
RegexInputCheckBoxRadioAll($ctrl, strError.RadioGroup); 
break; 
} 
} 
//标签内容空验证 
function RegexNull($ctrl) { 
if (strRegex.NoNull.test($ctrl.val())) { 
return RegexLen($ctrl); 
} 
else { 
Error($ctrl, strError.NoNull); 
return false; 
} 
} 
//验证多个同级一组input(type=radio)标签 或 input(type=checkbox)标签 
function RegexInputCheckBoxRadioAll($ctrl, error) { 
if ($ctrl.parent().children(":checked").length == 0) { 
if ($ctrl.parent().children().attr("super")) { 
//同级标签中可能会有多个[super='y']存在,只取一个,用return false;控制,执行一次就从循环体中跳出 
$ctrl.parent().children("[super='y']").each(function () { 
Error($(this), error); 
return false; 
}); 
} 
else { 
//同级一组标签一起报错 
$ctrl.parent().children("[type='" + $ctrl.attr("type") + "']").each(function () { 
Error($(this), error); 
}); 
} 
return false; 
} 
else { 
if ($ctrl.parent().children().attr("super")) { 
$ctrl.parent().children("[super='y']").each(function () { 
Ok($(this)); 
return false; 
}); 
} 
else { 
$ctrl.parent().children().each(function () { 
Ok($(this)); 
}); 
} 
return true; 
} 
} 
//验证单个input(type=radio)标签 或 input(type=checkbox)标签 
function RegexInputCheckBoxRadioOnly($ctrl, error) { 
if (!$ctrl.attr("checked")) { 
Error($ctrl, error); 
return false; 
} 
else { 
Ok($ctrl); 
return true; 
} 
} 
//select标签,选项验证 
function RegexSelect($ctrl) { 
if ($ctrl.val() == strRegex.DDL) { 
Error($ctrl, strError.DDL); 
return false; 
} 
else { 
Ok($ctrl); 
return true; 
} 
} 
//标签允许为空内容格式验证,type=text标签验证 
function RegexInputTextOnly($ctrl, Regex, error) { 
//先验证标签是否为空 
if (strRegex.NoNull.test($ctrl.val())) { 
return RegexOtherFormat($ctrl, Regex, error); 
} 
else { 
Ok($ctrl); 
return true; 
} 
} 
//标签不允许为空内容格式验证,type=text标签验证 
function RegexInputTextAll($ctrl, Regex, error) { 
//先验证标签是否为空 
if (strRegex.NoNull.test($ctrl.val())) { 
return RegexOtherFormat($ctrl, Regex, error); 
} 
else { 
Error($ctrl, error); 
return false; 
} 
} 
//标签内容格式验证 
function RegexOtherFormat($ctrl, Regex, error) { 
if (Regex.test($ctrl.val())) { 
return RegexLen($ctrl); 
} 
else { 
Error($ctrl, error); 
return false; 
} 
} 
//textarea标签长度验证 
function RegexLen($ctrl) { 
//标签中是否有len属性 
if ($ctrl.attr("len")) { 
var error = strError.Length + $ctrl.attr("len") + "字!"; 
if (parseInt($ctrl.val().length) > parseInt($ctrl.attr("len"))) { 
Error($ctrl, error); 
return false; 
} 
} 
Ok($ctrl); 
return true; 
} 
//格式验证错误显示 
function Error($ctrl, error) { 
//标签中有err属性,根据属性内容填入title中 
if ($ctrl.attr("err")) { 
error = $ctrl.attr("err"); 
} 
if ($ctrl.attr("super")) { 
//具有super属性标签追加span 
$ctrl.parent().find("span").remove(); 
$ctrl.parent().append(SpanError); 
$ctrl.parent().find("span").append(error); 
$ctrl.parent().find("span").fadeTo("slow", 0.66); 
} 
else { 
//追加到title属性中 
$ctrl.attr("title", error); 
$ctrl.addClass("error"); 
} 
} 
//格式验证无误,清除错误样式 
function Ok($ctrl) { 
//去除可以存在的错误样式 
if ($ctrl.attr("super")) { 
$ctrl.parent().find("span").remove(); 
} 
else { 
$ctrl.removeClass("error"); 
} 
if ($.trim($ctrl.val()).length > 0) { 
var right = strRight.Info; 
//检查标签中是否有rig属性 
if ($ctrl.attr("rig")) { 
right = $ctrl.attr("rig"); 
} 
//添加正确提示信息 
if ($ctrl.attr("super")) { 
$ctrl.parent().append(SpanOk); 
$ctrl.parent().find("span").append(right); 
$ctrl.parent().find("span").fadeTo("slow",0.99).fadeTo("slow",0.99).fadeTo("slow",0); 
} 
else { 
$ctrl.attr("title", right); 
} 
} 
} 
//提交自检 
$("#vldBtn").click(function () { 
$("#form1 [vld]").each(function () { 
RegexGether($(this)); 
}); 
//检查标签中样式是否有error 
if ($("#form1 [vld][class='error']").length > 0) { 
return false; 
} 
else { 
return true; 
} 
}); 
});

AutoValidate.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<link href="Css/style01.css" rel="stylesheet" type="text/css" /> 
<link href="Css/AutoValidate.css" rel="stylesheet" type="text/css" /> 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script src="Scripts/Jquery.timer.js" type="text/javascript"></script> 
<script src="Js/style.js" type="text/javascript"></script> 
<script src="Js/AutoValidate.js" type="text/javascript"></script> 
</head> 
<body> 
<form id="form1"> 
<ul class="tab_ul"> 
<li> 
<p>姓名:</p> 
<p><input id="name" type="text" vld="nonull" err="okokok!!!" super="y" rig="格式蜚蜚蜚??蜚????蜚????蜚???a" /></p> 
</li> 
<li> 
<p>年龄:</p> 
<p><input id="age" type="text" vld="age" /></p> 
</li> 
<li> 
<p>日期:</p> 
<p><input id="date" type="text" vld="ndate" /></p> 
</li> 
<li> 
<p>金钱:</p> 
<p><input id="price" type="text" vld="nprice" /></p> 
</li> 
<li> 
<p>邮箱:</p> 
<p><input id="email" type="text" vld="email" /></p> 
</li> 
<li> 
<p>邮编:</p> 
<p><input id="post" type="text" vld="post" /></p> 
</li> 
<li> 
<p>电话:</p> 
<p><input id="phone" type="text" vld="phone" len="10" /></p> 
</li> 
<li> 
<p>身份证:</p> 
<p><input id="card" type="text" vld="card" /></p> 
</li> 
<li> 
<p>时间:</p> 
<p><input id="time" type="text" vld="ntime" /></p> 
</li> 
<li> 
<p>数字:</p> 
<p><input id="math" type="text" vld="nmath" /></p> 
</li> 
<li> 
<p>网址:</p> 
<p><input id="url" type="text" vld="url" /></p> 
</li> 
<li> 
<p>账号:</p> 
<p><input id="an" type="text" vld="nan" /></p> 
</li> 
<li style="height:60px"> 
<p>文本长度限制:</p> 
<p><textarea id="len" style="width:300px; height:50px;" len="50" vld="nonull"></textarea></p> 
</li> 
<li> 
<p>下拉框:</p> 
<p><select id="ddl" vld="ddl"><option>请选择</option><option value="1">中国</option></select></p> 
</li> 
<li> 
<p>方形复选框:</p> 
<p><input type="checkbox" id="check1" vld="check" value="1" /><label for="check1">是</label></p> 
</li> 
<li> 
<p>圆形复选框:</p> 
<p><input type="radio" id="radio1" vld="radio" value="1" /><label for="radio1">是</label></p> 
</li> 
<li> 
<p>方形复选框:</p> 
<p><input type="checkbox" id="Checkbox1" vld="checkgroup" name="dsa" value="1" err="必须选一个" super="y"/><label for="Checkbox1">是</label><input type="checkbox" id="Checkbox2" name="dsa" vld="checkgroup" value="1" /><label for="Checkbox2">是</label></p> 
</li> 
<li> 
<p>圆形复选框:</p> 
<p><input type="radio" id="radio2" vld="radiogroup" name="asd" value="1" /><label for="radio2">是</label><input type="radio" id="radio3" name="asd" vld="radiogroup" value="1" /><label for="radio3">是</label></p> 
</li> 
<li> 
<input id="vldBtn" type="button" value="确认" /> 
</li> 
</ul> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
vue中如何使用ztree
Feb 06 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
js 对象使用的小技巧实例分析
Nov 08 Javascript
js数组中去除重复值的几种方法
Aug 03 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 #Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 #Javascript
extjs之去除s.gif的影响
Dec 25 #Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 #Javascript
javascript与webservice的通信实现代码
Dec 25 #Javascript
基于node.js的快速开发透明代理
Dec 25 #Javascript
用方法封装javascript的new操作符(一)
Dec 25 #Javascript
You might like
mysql 全文搜索 技巧
2007/04/27 PHP
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
Javascript实现的分页函数
2006/12/22 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
pandas计数 value_counts()的使用
2019/06/24 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
银行办理业务介绍信
2014/01/18 职场文书
2014年民警工作总结
2014/11/25 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书