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

后经过一段对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 = "请核对网址格式，如http://www.jb51.net！";
//账号
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="格式蜚蜚蜚暃蜚暃暃蜚暃暃蜚暃昦" /></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>

时间： 2024-09-20 16:14:20

基于Jquery的标签智能验证实现代码_jquery的相关文章

基于jquery实现的树形菜单效果代码_jquery

本文实例讲述了基于jquery实现的树形菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的树形菜单代码,点击菜单项可以向下滑出对应的二级菜单,效果流畅自然. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tree-style-show-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

基于jQuery倾斜打开侧边栏菜单特效代码_jquery

基于jQuery多重图片无限循环动画效果.这是一款非常实用的jQuery多图片无限循环动画特效插件. 效果图如下:   在线预览    源码下载 html代码: <div id="paper-back"> <nav> <div class="close"></div> <a href="#">Home</a> <a href="#">About

基于JQuery的asp.net树实现代码_jquery

本tree的数据从sql的表中提取而来,sql表的结构如下: 上面的表中  parentmodeuleID是代表父ID的标志,如果当前节点为根节点,则规定为0.  然后就是如何将上面的单表来组成树状结构.这时我们可以利用IList来加载数据库models来实现,具体Tree类如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; na

基于Jquery实现表格动态分页实现代码_jquery

当页面点击分页图标时,程序会自动去后台获取对应页数的记录. 关键代码如下: 需要引入的css和js文件有: 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="<%=basePath %>css/theme/default/css/jpage.css"></link> <link ID="skin" rel="sty

基于jquery用于查询操作的实现代码_jquery

一.本文干些啥: 通过javascript得到用户操作改变url参数从而实现某些功能,如查询(具体的查询由服务器端代码得到url中的参数组成查询语句实现). 二.准备工作: 一个JQuery类库(我使用的版本为:1.3.2),一个工具类库(Tool.js,基本都是网上搜索来的代码),一个查询类库(Search.js,自己写的),一个htm页面(用来做练习),将这些js代码添加进页面htm页面. htm页面 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//

基于jquery的二级联动菜单实现代码_jquery

jQuery 1.3.2 简单实现select二级联动 复制代码 代码如下: <!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

jquery.Jwin.js 基于jquery的弹出层插件代码_jquery

代码如下: 复制代码 代码如下: (function ($) { var imgdir = 'images/';//图片文件夹路径 var autoHide=false;//悬浮div是否自动隐藏 var hideType='hide';//隐藏的方式 可选参数 hide.slide.fade var hideDelay=0;//悬浮div隐藏过程使用的时间 var hideTime=0;//悬浮div延迟隐藏时间 var zIndex=100;//多个div时获取焦点的div处于顶层 var

基于JQuery的简单实现折叠菜单代码_jquery

菜单为二级,初始化时为折叠效果,单击大项标题时展开,显示二级列表. HTML代码如下: 复制代码 代码如下: <body> <div class="mainleftFAQ"> <div class="category"> <img src="images/admin.gif" width="215" height="66" /> </div> &l

基于Jquery与WebMethod投票功能实现代码_jquery

1:功能描述 1)最好是若干个星星组成,用户投票时候只要鼠标点击星星就可以实现投票,可以自定义星星个数 2)未投票.投票中.完成投票,星星的样式不同 3)每个星星的都可以自定义提示 比如 "差" "一般" "还好" "不错" 4)完成投票后,动画展示投票结果并且不可再投票 2:思路描述 1.3)使用循环,最大值是星星的个数,每次循环添加一条<a></a>的语句,这条超链接通过Class指定星星样式,通过