js番茄的表单验证类

所属分类：网络编程 / JavaScript 阅读数： 1631

收藏 0赞 0分享

相信大家看代码后再添加一些针对其他格式的验证也不是太麻烦的事情
对于各种提示效果需要修改 feedback 方法就可以实现，因为不想让代码变得太臃肿，所以有很多不常用的功能就没有再添加了
主要目的提供大家参考与分享，也希望能够根据大家的意见使其变得更加完善

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>番茄的表单验证类_脚本之家</title>  </head> <body> <form id="form1" name="form1" method="post" action="" onsubmit="return validator(this);">   <table width="600" border="0" cellspacing="0" cellpadding="2" style="font:12px Tahoma">     <tr>       <td>密码</td>       <td>password</td>       <td><input type="text" name="password" controlName="密码" dataType="password" /></td>     </tr>     <tr>       <td>密码确认</td>       <td>confirm</td>       <td><input type="text" name="confirm" controlName="密码确认" confirm="password" /></td>     </tr>     <tr>       <td width="57">英文</td>       <td width="60">english</td>       <td width="471"><input type="text" name="english" controlName="英文" dataType="english" dataLength="4,10" />       4~10个字符</td>     </tr>     <tr>       <td>中文</td>       <td>chinese</td>       <td><input type="text" name="chinese" required="required" controlName="中文" /> 非空</td>     </tr>     <tr>       <td>数字</td>       <td>number</td>       <td><input type="text" name="number" controlName="数字" dataBetween="10,100" />       大于10，小于100</td>     </tr>     <tr>       <td>整数</td>       <td>integer</td>       <td><input type="text" name="integer" controlName="整数" dataType="integer" /></td>     </tr>     <tr>       <td>浮点数</td>       <td>float</td>       <td><input type="text" name="float" controlName="浮点数" dataType="float" /></td>     </tr>     <tr>       <td>日期</td>       <td>date</td>       <td><input type="text" name="date" controlName="日期" dataType="date" /></td>     </tr>     <tr>       <td>邮件</td>       <td>email</td>       <td><input type="text" name="email" controlName="邮件" dataType="email" /></td>     </tr>     <tr>       <td>网址</td>       <td>url</td>       <td><input type="text" name="url" controlName="网址" dataType="url" /></td>     </tr>     <tr>       <td>电话</td>       <td>phone</td>       <td><input type="text" name="phone" controlName="电话" dataType="phone" /></td>     </tr>     <tr>       <td>手机</td>       <td>mobile</td>       <td><input type="text" name="mobile" controlName="手机" dataType="mobile" /></td>     </tr>     <tr>       <td>IP地址</td>       <td>ip</td>       <td><input type="text" name="ip" controlName="IP地址" dataType="ip" /></td>     </tr>     <tr>       <td>邮编</td>       <td>zipcode</td>       <td><input type="text" name="zipcode" controlName="邮编" dataType="zipcode" /></td>     </tr>     <tr>       <td>QQ号码</td>       <td>qq</td>       <td><input type="text" name="qq" controlName="QQ号码" dataType="ip" /></td>     </tr>     <tr>       <td>MSN</td>       <td>msn</td>       <td><input type="text" name="msn" controlName="MSN" dataType="msn" /></td>     </tr>     <tr>       <td>身份证</td>       <td>idcard</td>       <td><input type="text" name="idcard" controlName="身份证" dataType="idcard" /></td>     </tr>     <tr>       <td colspan="3" align="left"><input type="submit" name="Submit" value=" 提交 " /></td>     </tr>   </table> </form> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

1.".3"这样也是算浮点数的
2.this.reg和this.tip可以用
this.reg = {englisth : /^[a-zA-Z0-9_\-]+$/, chinese : /^[\u0391-\uFFE5]+$/}
这种形式，省点代码
3.日期只验证格式没有验证合法性

btw:controlName的做法不错

更多精彩内容其他人还在看

js番茄的表单验证类

JSONP原理及简单实现

浅析JSONP技术原理及实现

使用Web Uploader实现多文件上传

json的使用小结

非常实用的js验证框架实现源码附原理方法

js验证框架之RealyEasy验证详解

webpack中引用jquery的简单实现

JavaScript必知必会(五) eval 的使用

JavaScript必知必会(六) delete in instanceof

JavaScript必知必会(七)js对象继承

网络赚钱

站长故事

js番茄的表单验证类

JSONP原理及简单实现

浅析JSONP技术原理及实现

使用Web Uploader实现多文件上传

json的使用小结

非常实用的js验证框架实现源码 附原理方法

js验证框架之RealyEasy验证详解

webpack中引用jquery的简单实现

JavaScript必知必会(五) eval 的使用

JavaScript必知必会(六) delete in instanceof

JavaScript必知必会(七)js对象继承

网络赚钱

站长故事

非常实用的js验证框架实现源码附原理方法