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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-normal-table-check-plug-codes/

具体代码如下：

 
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:#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;}



使用方法
第一步：需设定表单项数据类型
<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个汉字" />

 

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;}

希望本文所述对大家的javascript程序设计有所帮助。