JS实现的通用表单验证插件完整实例

  更新时间：2015年08月20日 16:28:48 作者：佚名

  这篇文章主要介绍了JS实现的通用表单验证插件,可针对常见的日期、密码、姓名等进行验证并给出提示信息,非常具有实用价值,需要的朋友可以参考下

  本文实例讲述了JS实现的通用表单验证插件。分享给大家供大家参考。具体如下：

  这里演示一个通用的JS表单验证插件代码。使用方法：第一步：需设定表单项数据类型，第二步：实例表单验证，验证错误提示说明（程序有自带相关错误提示，可自定义每项验证错误提示时文本form表单验证js插件form表单验证js插件，只需添加msg）。

  运行效果截图如下：

  在线演示地址如下：

  具体代码如下：

  <pre class="brush:js;">

无标题文档

body,td{font:12px Verdana;color:#333}
input,textarea,select,td,th{font:12px Verdana;color:#333;border:1px solid #999;background:#fff}
table{border-collapse:collapse;}
th{font:bold 12px Verdana; text-align:right;padding:5px;}
td{padding:3px;line-height:1.8;}
input{height:20;}
textarea{width:80%;height:50px;overfmin:auto;}
form{display:inline}
/输入框样式/
input[type=text],input[type=password],textarea{border:1px solid #ccc;padding:2px;border-radius:1px;box-shadow:0 1px 2px rgba(0,0,0,0.1) inset;outline:medium none;line-height:25px;
-webkit-transition:all 0.15s ease-in 0s;
-moz-transition:all 0.15s ease-in 0s;
-o-transition:all 0.15s ease-in 0s;
font-family:"Microsoft YaHei",Verdana,Arial;
font-size:14px;
vertical-align:top;
}
input[type=text],input[type=password]{height:25px;}
input[type=text]:focus,input[type=password]:focus,textarea:focus{/border-color:rgba(82,168,236,0.8);/border-color:#52a8ec;box-shadow:0 1px 2px rgba(0,0,0,0.1) inset,0 0 5px rgba(82,168,236,0.6);outline:0 none;}

使用方法

<p>第一步：需设定表单项数据类型

  <input type="text" name="name" dataType="chinese[2,8]" />

  第二步：实例表单验证

  <script type="text/javascript">new ValidatorForm(表单对象); </script>

dataType可选参数

基础验证

email
Email地址
均可配合中括号使用，例如
长度验证：chinese[1,10]　为限制只能输入1-10个全角字符，注：一个全角字符长度为2
数字大小验证：number[18,26]　为限制只能输入18-26的数字
日期范围验证：date[1970-1-1,2012-12-12]　为限制1970-1-1至2012-12-12日期
上限及下限设定
下限设定：chinese[1,]　至少输入1个或以上有效字符 上限设定：chinese[,6]　最多输入6个有效字符 number和date格式也类式

tel
电话：支持手机/固话，识别区号及全半角逗号分隔多项

mobile
手机号码

url
网址

number
数字

english
英文字母

chinese
全角字符

username
帐号：字母开头4-20位的字母数字加下划线组合

password
密码：4-20位字母数字或@!#$%^&*.~组合

date
日期

length
长度：格式“length[最小长度,最大长度]”

其它验证

Compare
值对比：格式“Compare[比较符比较对象,比较类型]”
比较符包括[>,>=,<,<=,!=,=]
比较对象为表单项name,当表单有同名name值多项时取第一项
比较类型可选值[text,number,date]分别为[字符比较,数字比较,日期比较]，留空时对当前项值自动识别后对比
例如Compare[=password]

exec
自定义函数：格式“exec[函数名]”
传入当前输入框对象，返回json格式“{stat:结果[true/false],msg:提示文本,msgCss:样式[className],inCss:输入框样式[className]}”，stat为验证结果是否正确为必须返回项，其它项留空使用默认设置[inCss暂时未使用]

验证错误提示说明

  程序有自带相关错误提示，可自定义每项验证错误提示时文本，只需添加msg

  <input type="text" name="name" dataType="chinese[2,8]" msg="姓名必需填写1-4个汉字" />

##表单验证示例

真实姓名：请输入真实姓名

英文名：

主页：

密码：

重复：

信箱：

信箱：

邮编：

日期：

年龄：

年龄1：

电话：

手机：

生日：

自我介绍：中文是一个字
自定义验证程序,长度大于50触发自定义错误及样式，长度大于150系统自带错误

/输入项样式/
input.vf_inCorrect,textarea.vf_inCorrect{box-shadow:0 1px 2px rgba(3,139,0,0.2) inset;border-color:#90b983;color:#2d7c14;}
input.vf_inError,textarea.vf_inError{box-shadow:0 1px 2px rgba(139,23,0,0.2) inset,0 0 5px rgba(139,23,0,0.6);border-color:#d46060;color:#b40000;}
.vf_Normal,.vf_Correct,.vf_Error,.vf_Focus{vertical-align:middle;display:inline-block;padding:3px;font-size:12px;margin-left:5px; background:#eee;}
.vf_Normal{color:#777;}
.vf_Focus{color:#000;}/提示/
.vf_Correct{color:#20800d;display:none;}/验证通过/
.vf_Error{color:#f00;}/错误/
/自定义样式/
input.inTestClass,textarea.inTestClass{box-shadow:0 0 2px rgba(0,0,0,0.3) inset,0 0 5px rgba(139,23,0,0.6);border-color:#00f;color:#eee;background-color:#333;}
.TestClass_OK{color:#fff;background-color:#080;}
.TestClass_Err{color:#fff;background-color:#c00;}

//添加事件
function addEvent(o,e,f){
if(window.attachEvent){o.attachEvent("on"+e,f)}else if(window.addEventListener){o.addEventListener(e,f,false);}else{o["on"+e]=f;}
}
//取消事件
function removeEvent(o,e,f){
if(window.detachEvent){o.detachEvent("on"+e,f);}else if(window.removeEventListener){o.removeEventListener(e,f,false);}else{o["on"+e]=null;}
}
// class是否存在
function hasClass(obj,sClass){var reg = new RegExp("(^|\s)" + sClass + "(\s|$)");return reg.test(obj.className)}
//阻止浏览器的默认行为
function stopDefault(e){if(e&&e.preventDefault){e.preventDefault();}else{window.event.returnValue=false;}return false;}
//阻断事件冒泡
function stopBubble(e){if(e&&e.stopPropagation){e.stopPropagation();}else{window.event.cancelBubble=true;}}
function GetID(s){return document.getElementById(s);}
//创建元素
function creElm(o,pN,t){
var tmp=document.createElement(t||'div'),p;
for(p in o){tmp[p]=o[p];}
return pN?pN.appendChild(tmp):document.body.appendChild(tmp);
}
//计算字符串长度[全角算2长度]
function strLength(str){return str.replace(/¹/g,"**").length;}
function SetCss(o,k,s){
var c=o.className.split(' '),n=0,nCSS='';
for(var i=0;i