本文实例讲述了js实现的通用表单验证插件。分享给大家供大家参考。具体如下：
这里演示一个通用的JS表单验证插件代码。使用方法：第一步：需设定表单项数据类型，第二步：实例表单验证，验证错误提示说明（程序有自带相关错误提示，可自定义每项验证错误提示时文本，只需添加msg）。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-normal-table-check-plug-codes/
具体代码如下：
zuojiankuohaophpcn!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
zuojiankuohaophpcnhtml xmlns="http://www.w3.org/1999/xhtml">
zuojiankuohaophpcnhead>
zuojiankuohaophpcnmeta http-equiv="Content-Type" content="text/html; charset=utf-8" />
zuojiankuohaophpcntitle>无标题文档zuojiankuohaophpcn/title>
zuojiankuohaophpcnstyle>
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;}
zuojiankuohaophpcn/style>
zuojiankuohaophpcn/head>
zuojiankuohaophpcnbody>
zuojiankuohaophpcnh2>使用方法zuojiankuohaophpcn/h2>
zuojiankuohaophpcnp>第一步：需设定表单项数据类型zuojiankuohaophpcn/p>
zuojiankuohaophpcnp style="padding:10px;border:2px dashed #ea0; background-color:#ffe;">zuojiankuohaophpcninput type="text" name="name" zuojiankuohaophpcnstrong style="color:#f00;">dataType="chinese[2,8]"zuojiankuohaophpcn/strong> />zuojiankuohaophpcn/p>
zuojiankuohaophpcnp>第二步：实例表单验证zuojiankuohaophpcn/p>
zuojiankuohaophpcnp style="padding:10px;border:2px dashed #ea0; background-color:#ffe;">zuojiankuohaophpcnscript type="text/javascript">zuojiankuohaophpcnstrong style="color:#f00;">new ValidatorForm(表单对象);zuojiankuohaophpcn/strong> zuojiankuohaophpcn/script>zuojiankuohaophpcn/p>
zuojiankuohaophpcnh3>dataType可选参数zuojiankuohaophpcn/h3>
zuojiankuohaophpcntable width="100%" border="0" cellspacing="0" cellpadding="0">
zuojiankuohaophpcntr>
zuojiankuohaophpcnth colspan="3" style="text-align:left; background-color:#eee;">基础验证zuojiankuohaophpcn/th>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcnth>emailzuojiankuohaophpcn/th>
zuojiankuohaophpcntd>Email地址zuojiankuohaophpcn/td>
zuojiankuohaophpcntd rowspan="11">zuojiankuohaophpcnstrong>均可配合中括号使用zuojiankuohaophpcn/strong>，例如zuojiankuohaophpcnbr />
长度验证：chinese[1,10] 为限制只能输入1-10个全角字符，zuojiankuohaophpcnstrong>注：一个全角字符长度为2zuojiankuohaophpcn/strong>zuojiankuohaophpcnbr />
数字大小验证：number[18,26] 为限制只能输入18-26的数字zuojiankuohaophpcnbr />
日期范围验证：date[1970-1-1,2012-12-12] 为限制1970-1-1至2012-12-12日期zuojiankuohaophpcnbr />
zuojiankuohaophpcnstrong>上限及下限设定zuojiankuohaophpcn/strong>zuojiankuohaophpcnbr />
下限设定：chinese[1,] 至少输入1个或以上有效字符zuojiankuohaophpcnbr />上限设定：chinese[,6] 最多输入6个有效字符zuojiankuohaophpcnbr />number和date格式也类式zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcnth>telzuojiankuohaophpcn/th>
zuojiankuohaophpcntd>电话：支持手机/固话，识别区号及全半角逗号分隔多项zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcnth>mobilezuojiankuohaophpcn/th>
zuojiankuohaophpcntd>手机号码zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcnth>urlzuojiankuohaophpcn/th>
zuojiankuohaophpcntd>网址zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcnth>numberzuojiankuohaophpcn/th>
zuojiankuohaophpcntd>数字zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcnth>englishzuojiankuohaophpcn/th>
zuojiankuohaophpcntd>英文字母zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcnth>chinesezuojiankuohaophpcn/th>
zuojiankuohaophpcntd>全角字符zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcnth>usernamezuojiankuohaophpcn/th>
zuojiankuohaophpcntd>帐号：字母开头4-20位的字母数字加下划线组合zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcnth>passwordzuojiankuohaophpcn/th>
zuojiankuohaophpcntd>密码：4-20位字母数字或@!#$%^&*.~组合zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcnth>datezuojiankuohaophpcn/th>
zuojiankuohaophpcntd>日期zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcnth>lengthzuojiankuohaophpcn/th>
zuojiankuohaophpcntd>长度：格式“length[最小长度,最大长度]”zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcnth colspan="3" style="text-align:left; background-color:#eee;">其它验证zuojiankuohaophpcn/th>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcnth>Comparezuojiankuohaophpcn/th>
zuojiankuohaophpcntd colspan="2">值对比：格式“Compare[比较符比较对象,比较类型]”zuojiankuohaophpcnbr />
比较符包括[>,>=,zuojiankuohaophpcn,zuojiankuohaophpcn=,!=,=]zuojiankuohaophpcnbr />
比较对象为表单项name,当表单有同名name值多项时取第一项zuojiankuohaophpcnbr />
比较类型可选值[text,number,date]分别为[字符比较,数字比较,日期比较]，留空时对当前项值自动识别后对比zuojiankuohaophpcnbr />
例如Compare[=password]zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcnth>execzuojiankuohaophpcn/th>
zuojiankuohaophpcntd colspan="2">自定义函数：格式“exec[函数名]” zuojiankuohaophpcnbr />
传入当前输入框对象，返回json格式“{stat:结果[true/false],msg:提示文本,msgCss:样式[className],inCss:输入框样式[className]}”，stat为验证结果是否正确为必须返回项，其它项留空使用默认设置[inCss暂时未使用]
zuojiankuohaophpcnbr />zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcn/table>
zuojiankuohaophpcnh3>验证错误提示说明zuojiankuohaophpcn/h3>
zuojiankuohaophpcnp>程序有自带相关错误提示，可自定义每项验证错误提示时文本，只需添加msgzuojiankuohaophpcn/p>
zuojiankuohaophpcnp style="padding:10px;border:2px dashed #ea0; background-color:#ffe;">zuojiankuohaophpcninput type="text" name="name" dataType="chinese[2,8]" zuojiankuohaophpcnstrong style="color:#f00;">msg="姓名必需填写1-4个汉字"zuojiankuohaophpcn/strong> />zuojiankuohaophpcn/p>
zuojiankuohaophpcnform name="theForm" id="theForm" action="" method="get">
zuojiankuohaophpcnh2>表单验证示例zuojiankuohaophpcn/h2>
zuojiankuohaophpcntable align="center" width="100%">
zuojiankuohaophpcntr>
zuojiankuohaophpcntd>真实姓名：zuojiankuohaophpcn/td>zuojiankuohaophpcntd>zuojiankuohaophpcninput type="text" name="Name" dataType="chinese[1,]" />zuojiankuohaophpcnspan msgbox="1">请输入真实姓名zuojiankuohaophpcn/span>
zuojiankuohaophpcnspan id="vfMsgBox_Name">zuojiankuohaophpcn/span>
zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcntd>英文名：zuojiankuohaophpcn/td>zuojiankuohaophpcntd>zuojiankuohaophpcninput type="text" name="Nick" dataType="english[1,10]" />zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcntd>主页：zuojiankuohaophpcn/td>zuojiankuohaophpcntd>zuojiankuohaophpcninput type="text" name="Homepage" dataType="url" />zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcntd>密码：zuojiankuohaophpcn/td>zuojiankuohaophpcntd>zuojiankuohaophpcninput name="password" type="text" dataType="password" />zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcntd>重复：zuojiankuohaophpcn/td>zuojiankuohaophpcntd>zuojiankuohaophpcninput name="password2" type="text" dataType="Compare[=password"密码]" />zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcntd>信箱：zuojiankuohaophpcn/td>zuojiankuohaophpcntd>zuojiankuohaophpcninput type="text" name="email" dataType="email[1,]" />zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcntd>信箱：zuojiankuohaophpcn/td>zuojiankuohaophpcntd>zuojiankuohaophpcninput type="text" name="email2" dataType="email Compare[=email"信箱]" />zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcntd>邮编：zuojiankuohaophpcn/td>zuojiankuohaophpcntd>zuojiankuohaophpcninput type="text" name="QQ" dataType="number[100000,999999]" />zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcntd>日期：zuojiankuohaophpcn/td>zuojiankuohaophpcntd>zuojiankuohaophpcninput type="text" name="date" dataType="date" />
zuojiankuohaophpcninput type="text" name="date2" dataType="Compare[>date"起始日期,date]" />
zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcntd>年龄：zuojiankuohaophpcn/td>zuojiankuohaophpcntd>zuojiankuohaophpcninput type="text" name="Year" dataType="number[18,28]" />zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcntd>年龄1：zuojiankuohaophpcn/td>zuojiankuohaophpcntd>zuojiankuohaophpcninput type="text" name="Year1" dataType="number[,18]" />zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcntd>电话：zuojiankuohaophpcn/td>zuojiankuohaophpcntd>zuojiankuohaophpcninput type="text" name="Phone" dataType="tel" />zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcntd>手机：zuojiankuohaophpcn/td>zuojiankuohaophpcntd>zuojiankuohaophpcninput type="text" name="mobile" dataType="mobile" />zuojiankuohaophpcn/td>
zuojiankuohaophpcn/tr>
zuojiankuohaophpcntr>
zuojiankuohaophpcntd>生日：zuojiankuohaophpcn/td>zuojiankuohaophpcntd>zuojiankuohaophpcninput type="text" name="Birthday" dataTy 
