基于Jquery的标签智能验证实现代码_Javascript教程-查字典教程网

摘要：后经过一段对Jquery的学习，Jquery的强大解决了辅助代码过多不易维护的问题。AutoValidate.JS复制代码代码如下:////...

后经过一段对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}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])((d{4})|d{3}[X,x]))|([1-9]d{5}[1-9]d{1}((0d)|(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><img src='" + FilePath() + "images/error.gif' /></span>";

var SpanOk = "<span><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">

<head>

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

<p>文本长度限制：</p>

</li>

<li>

</li>

<li>

<p>方形复选框：</p>

</li>

<li>

<p>圆形复选框：</p>

</li>

<li>

<p>方形复选框：</p>

</li>

<li>

<p>圆形复选框：</p>

</li>

<li>

</li>

</ul>

</form>

</body>

</html>