js番茄的表單驗證類

2019-11-21 01:41:29

字體：大中小

來源：轉載

供稿：網友

相信大家看代碼后再添加一些針對其他格式的驗證也不是太麻煩的事情
對于各種提示效果需要修改 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> <script language="javascript" type="text/javascript"> //去除字符串兩邊的空格 String.prototype.trim = function () {     return this.replace(/(^/s+)|(/s+$)/g, ""); } //檢測字符串是否為空 String.prototype.isEmpty = function () {     return !(/.?[^/s　]+/.test(this)); } //檢測值是否介于某兩個指定的值之間 String.prototype.isBetween = function (val, min, max) {     return isNaN(val) == false && val >= min && val <= max; } //獲取最大值或最小值 String.prototype.getBetweenVal = function (what) {     var val = this.split(',');     var min = val[0];     var max = val[1] == null ? val[0] : val[1];     if (parseInt(min) > parseInt(max)) {         min = max;         max = val[0];     }     return what == 'min' ? (isNaN(min) ? null : min) : (isNaN(max) ? null : max); } var validator = function (formObj) {     this.allTags = formObj.getElementsByTagName('*');     //字符串驗證正則表達式     this.reg = new Object();     this.reg.english = /^[a-zA-Z0-9_/-]+$/;     this.reg.chinese = /^[/u0391-/uFFE5]+$/;     this.reg.number = /^[-/+]?/d+(/./d+)?$/;     this.reg.integer = /^[-/+]?/d+$/;     this.reg.float = /^[-/+]?/d+(/./d+)?$/;     this.reg.date = /^(/d{4})(-|//)(/d{1,2})/2(/d{1,2})$/;     this.reg.email = /^/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*$/;     this.reg.url = /^(((ht|f)tp(s?))/:////)[a-zA-Z0-9]+/.[a-zA-Z0-9]+[//=/?%/-&_~`@[/]/':+!]*([^<>/"/"])*$/;     this.reg.phone = /^((/(/d{2,3}/))|(/d{3}/-))?(/(0/d{2,3}/)|0/d{2,3}-)?[1-9]/d{6,7}(/-/d{1,4})?$/;     this.reg.mobile = /^((/(/d{2,3}/))|(/d{3}/-))?((13/d{9})|(159/d{8}))$/;     this.reg.ip = /^(0|[1-9]/d?|[0-1]/d{2}|2[0-4]/d|25[0-5]).(0|[1-9]/d?|[0-1]/d{2}|2[0-4]/d|25[0-5]).(0|[1-9]/d?|[0-1]/d{2}|2[0-4]/d|25[0-5]).(0|[1-9]/d?|[0-1]/d{2}|2[0-4]/d|25[0-5])$/;     this.reg.zipcode = /^[1-9]/d{5}$/;     this.reg.qq = /^[1-9]/d{4,10}$/;     this.reg.msn = /^/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*$/;     this.reg.idcard = /(^/d{15}$)|(^/d{17}[0-9Xx]$)/;     //錯誤輸出信息     this.tip = new Object();     this.tip.unknow = '未找到的驗證類型，無法執行驗證。';     this.tip.paramError = '參數設置錯誤，無法執行驗證。';     this.tip.required = '不允許為空。';     this.tip.english = '僅允許英文字符及下劃線 (a-zA-Z0-9_)。';     this.tip.chinese = '僅允許中文字符。';     this.tip.number = '不是一個有效的數字。';     this.tip.integer = '不是一個有效的整數。';     this.tip.float = '不是一個有效的浮點數。';     this.tip.date = '不是一個有效的日期格式。 (例如：2007-06-29)';     this.tip.email = '不是一個有效的電子郵件格式。';     this.tip.url = '不是一個有效的超鏈接格式。';     this.tip.phone = '不是一個有效的電話號碼。';     this.tip.mobile = '不是一個有效的手機號碼。';     this.tip.ip = '不是一個有效的IP地址。';     this.tip.zipcode = '不是一個有效的郵政編碼。';     this.tip.qq = '不是一個有效的QQ號碼。';     this.tip.msn = '不是一個有效的MSN帳戶。';     this.tip.idcard = '不是一個有效的身份證號碼。';     //獲取控件名稱     this.getControlName = function ()     {         return this.element.getAttribute('controlName') == null                ? '指定控件的值'                : this.element.getAttribute('controlName');     }     //設定焦點     this.setFocus = function (ele) {         try {             ele.focus();         } catch (e){}     }     //設置邊框顏色     this.setBorderColor = function (ele) {         var borderColor = ele.currentStyle ?                           ele.currentStyle.borderColor :                           document.defaultView.getComputedStyle(ele, null)['borderColor'];         ele.style.borderColor = '#ff9900';         ele.onkeyup = function () {             this.style.borderColor = borderColor;         }     }     //輸出錯誤反饋信息     this.feedback = function (type) {         try {             var msg = eval('this.tip.' + type) == undefined ?                       type :                       this.getControlName() + eval('this.tip.' + type);         } catch (e) {             msg = type;         }         this.setBorderColor(this.element);         alert(msg);         this.setFocus(this.element);     };     //執行字符串驗證     this.validate = function () {         var v = this.element.value;         //驗證是否允許非空         var required = this.element.getAttribute('required');         if (required != null && v.isEmpty()) {             this.feedback('required');             return false;         }         //驗證是否合法格式         var dataType = this.element.getAttribute('dataType');         if (!v.isEmpty() && dataType != null &&  dataType.toLowerCase() != 'password') {             dataType = dataType.toLowerCase();             try {                 if (!(eval('this.reg.' + dataType)).test(v)) {                     this.feedback(dataType);                     return false;                 }             } catch(e) {                 this.feedback('unknow');                 return false;             }         }         //執行數據驗證         var confirm = this.element.getAttribute('confirm');         if (confirm != null) {             try {                 var data = eval('formObj.' + confirm + '.value');                 if (v != data) {                     alert('兩次輸入的內容不一致，請重新輸入。');                     this.setBorderColor(this.element);                     this.setFocus(this.element);                     return false;                 }             } catch (e) {                 this.feedback('paramError');                 return false;             }         }         //驗證數字大小         var dataBetween = this.element.getAttribute('dataBetween');         if (!v.isEmpty() && dataBetween != null) {             var min = dataBetween.getBetweenVal('min');             var max = dataBetween.getBetweenVal('max');             if (min == null || max == null) {                 this.feedback('paramError');                 return false;             }             if (!v.isBetween(v.trim(), min, max)) {                 this.feedback(this.getControlName() + '必須是介于 ' + min + '-' + max + ' 之間的數字。');                 return false;             }         }         //驗證字符長度         var dataLength = this.element.getAttribute('dataLength');         if (!v.isEmpty() && dataLength != null) {             var min = dataLength.getBetweenVal('min');             var max = dataLength.getBetweenVal('max');             if (min == null || max == null) {                 this.feedback('paramError');                 return false;             }             if (!v.isBetween(v.trim().length, min, max)) {                 this.feedback(this.getControlName() + '必須是 ' + min + '-' + max + ' 個字符。');                 return false;             }         }         return true;     };     //執行初始化操作     this.init = function () {         for (var i=0; i<this.allTags.length; i++) {             if (this.allTags[i].tagName.toUpperCase() == 'INPUT' ||                 this.allTags[i].tagName.toUpperCase() == 'SELECT' ||                 this.allTags[i].tagName.toUpperCase() == 'TEXTAREA')             {                 this.element = allTags[i];                 if (!this.validate())                     return false;             }         }     };     return this.init(); } </script> </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的做法不錯

上一篇：番茄的表單驗證類代碼修改版

下一篇：神奇的代碼通殺各種網站-可隨意修改復制頁面內容