基于Jquery的標(biāo)簽智能驗證實現(xiàn)代碼
更新時間：2010年12月27日 23:34:50 作者：
一直在尋找最快捷方便的信息驗證方法，之前自己編過JS版驗證但要寫很多輔助代碼，經(jīng)過許多次改進(jìn)，還是覺得太麻煩代碼還多，維護(hù)起太費(fèi)盡。
后經(jīng)過一段對Jquery的學(xué)習(xí)，Jquery的強(qiáng)大解決了輔助代碼過多不易維護(hù)的問題。
AutoValidate.JS
/// <reference path="../Scripts/jquery-1.4.1-vsdoc.js" />
//驗證方法 v1.0，創(chuàng)建于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 標(biāo)簽驗證
//vld="***"必填 格式驗證
//vld="n***"選填 格式驗證
//err="***"錯誤顯示內(nèi)容
//super="y"用<span>追加提示信息，要用y以外字母得修改同級一組驗證，同級一組的標(biāo)簽可以在第一個標(biāo)簽進(jìn)行super="y"屬性標(biāo)識，其它不用
//len="***"長度限制，用于textarea標(biāo)簽
//<input id="***" type="text" vld="***" err="***" span="***" len="***"/>
$(function () {
//正則匿名對象
var strRegex = {};
//錯誤信息匿名對象
var strError = {};
//正確信息匿名對象
var strRight = {};
/** 參數(shù)配置 start **/
//非空
strRegex.NoNull = /[^\s]+/;
strError.NoNull = "請?zhí)顚憙?nèi)容，如123、中國！";
//郵箱
strRegex.Email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
strError.Email = "請核對郵箱格式，如china@163.com！";
//網(wǎng)址
strRegex.Url = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^\"\"])*$/;
strError.Url = "請核對網(wǎng)址格式，如http://www.dbjr.com.cn！";
//賬號
strRegex.An = /^([a-zA-Z0-9]|[_]){6,16}$/;
strError.An = "請核對賬號格式，如china_56！";
//數(shù)字
strRegex.Math = /\d+$/;
strError.Math = "請核對數(shù)字格式，如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 = "格式正確！"; //可以設(shè)置為空
//下拉框
strRegex.DDL = "請選擇";
strError.DDL = "請選擇選項";
//單個checkbox復(fù)選框
strRegex.Check = "請選擇";
strError.Check = "請選擇選項";
//單個radio復(fù)選框
strRegex.Radio = "請選擇";
strError.Radio = "請選擇選項";
//同級一組checkbox復(fù)選框
strRegex.CheckGroup = "請選擇";
strError.CheckGroup = "請選擇選項";
//同級一組radio復(fù)選框
strRegex.RadioGroup = "請選擇";
strError.RadioGroup = "請選擇選項";
//在標(biāo)簽后面追加信息
var SpanError = "<span class='vldSpanErr'><img src='" + FilePath() + "images/error.gif' /></span>";
var SpanOk = "<span class='vldSpanRig'><img src='" + FilePath() + "images/ok.gif' /></span>";
/** 參數(shù)配置 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;
}
}
//標(biāo)簽內(nèi)容空驗證
function RegexNull($ctrl) {
if (strRegex.NoNull.test($ctrl.val())) {
return RegexLen($ctrl);
}
else {
Error($ctrl, strError.NoNull);
return false;
}
}
//驗證多個同級一組input(type=radio)標(biāo)簽 或 input(type=checkbox)標(biāo)簽
function RegexInputCheckBoxRadioAll($ctrl, error) {
if ($ctrl.parent().children(":checked").length == 0) {
if ($ctrl.parent().children().attr("super")) {
//同級標(biāo)簽中可能會有多個[super='y']存在，只取一個，用return false;控制，執(zhí)行一次就從循環(huán)體中跳出
$ctrl.parent().children("[super='y']").each(function () {
Error($(this), error);
return false;
});
}
else {
//同級一組標(biāo)簽一起報錯
$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)標(biāo)簽 或 input(type=checkbox)標(biāo)簽
function RegexInputCheckBoxRadioOnly($ctrl, error) {
if (!$ctrl.attr("checked")) {
Error($ctrl, error);
return false;
}
else {
Ok($ctrl);
return true;
}
}
//select標(biāo)簽，選項驗證
function RegexSelect($ctrl) {
if ($ctrl.val() == strRegex.DDL) {
Error($ctrl, strError.DDL);
return false;
}
else {
Ok($ctrl);
return true;
}
}
//標(biāo)簽允許為空內(nèi)容格式驗證，type=text標(biāo)簽驗證
function RegexInputTextOnly($ctrl, Regex, error) {
//先驗證標(biāo)簽是否為空
if (strRegex.NoNull.test($ctrl.val())) {
return RegexOtherFormat($ctrl, Regex, error);
}
else {
Ok($ctrl);
return true;
}
}
//標(biāo)簽不允許為空內(nèi)容格式驗證，type=text標(biāo)簽驗證
function RegexInputTextAll($ctrl, Regex, error) {
//先驗證標(biāo)簽是否為空
if (strRegex.NoNull.test($ctrl.val())) {
return RegexOtherFormat($ctrl, Regex, error);
}
else {
Error($ctrl, error);
return false;
}
}
//標(biāo)簽內(nèi)容格式驗證
function RegexOtherFormat($ctrl, Regex, error) {
if (Regex.test($ctrl.val())) {
return RegexLen($ctrl);
}
else {
Error($ctrl, error);
return false;
}
}
//textarea標(biāo)簽長度驗證
function RegexLen($ctrl) {
//標(biāo)簽中是否有l(wèi)en屬性
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) {
//標(biāo)簽中有err屬性，根據(jù)屬性內(nèi)容填入title中
if ($ctrl.attr("err")) {
error = $ctrl.attr("err");
}
if ($ctrl.attr("super")) {
//具有super屬性標(biāo)簽追加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;
//檢查標(biāo)簽中是否有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));
});
//檢查標(biāo)簽中樣式是否有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>數(shù)字：</p>
<p><input id="math" type="text" vld="nmath" /></p>
</li>
<li>
<p>網(wǎng)址：</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>方形復(fù)選框：</p>
<p><input type="checkbox" id="check1" vld="check" value="1" /><label for="check1">是</label></p>
</li>
<li>
<p>圓形復(fù)選框：</p>
<p><input type="radio" id="radio1" vld="radio" value="1" /><label for="radio1">是</label></p>
</li>
<li>
<p>方形復(fù)選框：</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>圓形復(fù)選框：</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="確認(rèn)" />
</li>
</ul>
</form>
</body>
</html>
AutoValidate.JS
復(fù)制代碼 代碼如下:
/// <reference path="../Scripts/jquery-1.4.1-vsdoc.js" />
//驗證方法 v1.0，創(chuàng)建于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 標(biāo)簽驗證
//vld="***"必填 格式驗證
//vld="n***"選填 格式驗證
//err="***"錯誤顯示內(nèi)容
//super="y"用<span>追加提示信息，要用y以外字母得修改同級一組驗證，同級一組的標(biāo)簽可以在第一個標(biāo)簽進(jìn)行super="y"屬性標(biāo)識，其它不用
//len="***"長度限制，用于textarea標(biāo)簽
//<input id="***" type="text" vld="***" err="***" span="***" len="***"/>
$(function () {
//正則匿名對象
var strRegex = {};
//錯誤信息匿名對象
var strError = {};
//正確信息匿名對象
var strRight = {};
/** 參數(shù)配置 start **/
//非空
strRegex.NoNull = /[^\s]+/;
strError.NoNull = "請?zhí)顚憙?nèi)容，如123、中國！";
//郵箱
strRegex.Email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
strError.Email = "請核對郵箱格式，如china@163.com！";
//網(wǎng)址
strRegex.Url = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^\"\"])*$/;
strError.Url = "請核對網(wǎng)址格式，如http://www.dbjr.com.cn！";
//賬號
strRegex.An = /^([a-zA-Z0-9]|[_]){6,16}$/;
strError.An = "請核對賬號格式，如china_56！";
//數(shù)字
strRegex.Math = /\d+$/;
strError.Math = "請核對數(shù)字格式，如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 = "格式正確！"; //可以設(shè)置為空
//下拉框
strRegex.DDL = "請選擇";
strError.DDL = "請選擇選項";
//單個checkbox復(fù)選框
strRegex.Check = "請選擇";
strError.Check = "請選擇選項";
//單個radio復(fù)選框
strRegex.Radio = "請選擇";
strError.Radio = "請選擇選項";
//同級一組checkbox復(fù)選框
strRegex.CheckGroup = "請選擇";
strError.CheckGroup = "請選擇選項";
//同級一組radio復(fù)選框
strRegex.RadioGroup = "請選擇";
strError.RadioGroup = "請選擇選項";
//在標(biāo)簽后面追加信息
var SpanError = "<span class='vldSpanErr'><img src='" + FilePath() + "images/error.gif' /></span>";
var SpanOk = "<span class='vldSpanRig'><img src='" + FilePath() + "images/ok.gif' /></span>";
/** 參數(shù)配置 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;
}
}
//標(biāo)簽內(nèi)容空驗證
function RegexNull($ctrl) {
if (strRegex.NoNull.test($ctrl.val())) {
return RegexLen($ctrl);
}
else {
Error($ctrl, strError.NoNull);
return false;
}
}
//驗證多個同級一組input(type=radio)標(biāo)簽 或 input(type=checkbox)標(biāo)簽
function RegexInputCheckBoxRadioAll($ctrl, error) {
if ($ctrl.parent().children(":checked").length == 0) {
if ($ctrl.parent().children().attr("super")) {
//同級標(biāo)簽中可能會有多個[super='y']存在，只取一個，用return false;控制，執(zhí)行一次就從循環(huán)體中跳出
$ctrl.parent().children("[super='y']").each(function () {
Error($(this), error);
return false;
});
}
else {
//同級一組標(biāo)簽一起報錯
$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)標(biāo)簽 或 input(type=checkbox)標(biāo)簽
function RegexInputCheckBoxRadioOnly($ctrl, error) {
if (!$ctrl.attr("checked")) {
Error($ctrl, error);
return false;
}
else {
Ok($ctrl);
return true;
}
}
//select標(biāo)簽，選項驗證
function RegexSelect($ctrl) {
if ($ctrl.val() == strRegex.DDL) {
Error($ctrl, strError.DDL);
return false;
}
else {
Ok($ctrl);
return true;
}
}
//標(biāo)簽允許為空內(nèi)容格式驗證，type=text標(biāo)簽驗證
function RegexInputTextOnly($ctrl, Regex, error) {
//先驗證標(biāo)簽是否為空
if (strRegex.NoNull.test($ctrl.val())) {
return RegexOtherFormat($ctrl, Regex, error);
}
else {
Ok($ctrl);
return true;
}
}
//標(biāo)簽不允許為空內(nèi)容格式驗證，type=text標(biāo)簽驗證
function RegexInputTextAll($ctrl, Regex, error) {
//先驗證標(biāo)簽是否為空
if (strRegex.NoNull.test($ctrl.val())) {
return RegexOtherFormat($ctrl, Regex, error);
}
else {
Error($ctrl, error);
return false;
}
}
//標(biāo)簽內(nèi)容格式驗證
function RegexOtherFormat($ctrl, Regex, error) {
if (Regex.test($ctrl.val())) {
return RegexLen($ctrl);
}
else {
Error($ctrl, error);
return false;
}
}
//textarea標(biāo)簽長度驗證
function RegexLen($ctrl) {
//標(biāo)簽中是否有l(wèi)en屬性
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) {
//標(biāo)簽中有err屬性，根據(jù)屬性內(nèi)容填入title中
if ($ctrl.attr("err")) {
error = $ctrl.attr("err");
}
if ($ctrl.attr("super")) {
//具有super屬性標(biāo)簽追加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;
//檢查標(biāo)簽中是否有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));
});
//檢查標(biāo)簽中樣式是否有error
if ($("#form1 [vld][class='error']").length > 0) {
return false;
}
else {
return true;
}
});
});
AutoValidate.htm
復(fù)制代碼 代碼如下:
<!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>數(shù)字：</p>
<p><input id="math" type="text" vld="nmath" /></p>
</li>
<li>
<p>網(wǎng)址：</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>方形復(fù)選框：</p>
<p><input type="checkbox" id="check1" vld="check" value="1" /><label for="check1">是</label></p>
</li>
<li>
<p>圓形復(fù)選框：</p>
<p><input type="radio" id="radio1" vld="radio" value="1" /><label for="radio1">是</label></p>
</li>
<li>
<p>方形復(fù)選框：</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>圓形復(fù)選框：</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="確認(rèn)" />
</li>
</ul>
</form>
</body>
</html>
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了jQuery+ajax實現(xiàn)用戶登錄驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
jQueryPad 實用的jQuery測試工具(支持IE,chrome,FF)
這個jQueryPad也是我無意中在網(wǎng)上看頁面的時候看到的，下載下來試用了下，感覺很好，這個軟件是使用WPF開發(fā)的（不過不開源，需要安裝.NET Framework 3.5），整體界面很簡潔。2010-05-05
這篇文章主要介紹了jquery dialog獲取焦點的方法,結(jié)合實例形式分析了jQuery UI插件對話框dialog的基本使用技巧,需要的朋友可以參考下2017-02-02
下面小編就為大家?guī)硪黄狫q通過td獲取同行其它列td的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
本文主要是講解和學(xué)習(xí)jQuery的自動顯隱，漸入漸出、飛入飛出、自定義動畫等。非常詳細(xì)，這里推薦給有需要的小伙伴。2015-02-02
本文會給你們展示50個jquery代碼片段，這些代碼能夠給你的javascript項目提供幫助2011-09-09![jQuery 練習(xí)[一] 學(xué)習(xí)jquery的準(zhǔn)備工作](http://img.jbzj.com/images/xgimg/bcimg6.png)
jQuery 練習(xí)[一] 學(xué)習(xí)jquery的準(zhǔn)備工作
初次嘗試 jQuery, 近乎震撼! 簡潔、高效、優(yōu)雅、平易, 太有思想了.2010-05-05
本篇文章是對文件編碼導(dǎo)致jquery失效的解決方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
javascript與jquery中跳出循環(huán)的區(qū)別總結(jié)
本文是對javascript與jquery中跳出循環(huán)的區(qū)別進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
基于jQuery倒計時插件實現(xiàn)團(tuán)購秒殺效果
倒計時在WEB上應(yīng)用非常廣泛,如考試系統(tǒng)倒計時,團(tuán)購網(wǎng)站中的優(yōu)惠活動倒計時等等。今天,我們來使用jQuery倒計時超級實現(xiàn)團(tuán)購秒殺效果，感興趣的朋友一起學(xué)習(xí)吧2016-05-05