番茄的表單驗(yàn)證類，用于一些不需要特殊效果的表單驗(yàn)證個(gè)人認(rèn)為已經(jīng)足夠了，還是挺好用的。推薦給大家！
<!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>番茄的表單驗(yàn)證類</title> <script language="javascript" type="text/javascript"> //去除字符串兩邊的空格 String.prototype.trim = function () { return this.replace(/(^\s+)|(\s+$)/g, ""); } //檢測(cè)字符串是否為空 String.prototype.isEmpty = function () { return !(/.?[^\s ]+/.test(this)); } //檢測(cè)值是否介于某兩個(gè)指定的值之間 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('*'); //字符串驗(yàn)證正則表達(dá)式 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]$)/; //錯(cuò)誤輸出信息 this.tip = new Object(); this.tip.unknow = '未找到的驗(yàn)證類型，無法執(zhí)行驗(yàn)證。'; this.tip.paramError = '參數(shù)設(shè)置錯(cuò)誤，無法執(zhí)行驗(yàn)證。'; this.tip.required = '不允許為空。'; this.tip.english = '僅允許英文字符及下劃線 (a-zA-Z0-9_)。'; this.tip.chinese = '僅允許中文字符。'; this.tip.number = '不是一個(gè)有效的數(shù)字。'; this.tip.integer = '不是一個(gè)有效的整數(shù)。'; this.tip.float = '不是一個(gè)有效的浮點(diǎn)數(shù)。'; this.tip.date = '不是一個(gè)有效的日期格式。 (例如：2007-06-29)'; this.tip.email = '不是一個(gè)有效的電子郵件格式。'; this.tip.url = '不是一個(gè)有效的超鏈接格式。'; this.tip.phone = '不是一個(gè)有效的電話號(hào)碼。'; this.tip.mobile = '不是一個(gè)有效的手機(jī)號(hào)碼。'; this.tip.ip = '不是一個(gè)有效的IP地址。'; this.tip.zipcode = '不是一個(gè)有效的郵政編碼。'; this.tip.qq = '不是一個(gè)有效的QQ號(hào)碼。'; this.tip.msn = '不是一個(gè)有效的MSN帳戶。'; this.tip.idcard = '不是一個(gè)有效的身份證號(hào)碼。'; //獲取控件名稱 this.getControlName = function () { return this.element.getAttribute('controlName') == null ? '指定控件的值' : this.element.getAttribute('controlName'); } //設(shè)定焦點(diǎn) this.setFocus = function (ele) { try { ele.focus(); } catch (e){} } //設(shè)置邊框顏色 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; } } //輸出錯(cuò)誤反饋信息 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); }; //執(zhí)行字符串驗(yàn)證 this.validate = function () { var v = this.element.value; //驗(yàn)證是否允許非空 var required = this.element.getAttribute('required'); if (required != null && v.isEmpty()) { this.feedback('required'); return false; } //驗(yàn)證是否合法格式 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; } } //執(zhí)行數(shù)據(jù)驗(yàn)證 var confirm = this.element.getAttribute('confirm'); if (confirm != null) { try { var data = eval('formObj.' + confirm + '.value'); if (v != data) { alert('兩次輸入的內(nèi)容不一致，請(qǐng)重新輸入。'); this.setBorderColor(this.element); this.setFocus(this.element); return false; } } catch (e) { this.feedback('paramError'); return false; } } //驗(yàn)證數(shù)字大小 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 + ' 之間的數(shù)字。'); return false; } } //驗(yàn)證字符長(zhǎng)度 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 + ' 個(gè)字符。'); return false; } } return true; }; //執(zhí)行初始化操作 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>密碼確認(rèn)</td> <td>confirm</td> <td><input type="text" name="confirm" controlName="密碼確認(rèn)" 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個(gè)字符</td> </tr> <tr> <td>中文</td> <td>chinese</td> <td><input type="text" name="chinese" required="required" controlName="中文" /> 非空</td> </tr> <tr> <td>數(shù)字</td> <td>number</td> <td><input type="text" name="number" controlName="數(shù)字" dataBetween="10,100" /> 大于10，小于100</td> </tr> <tr> <td>整數(shù)</td> <td>integer</td> <td><input type="text" name="integer" controlName="整數(shù)" dataType="integer" /></td> </tr> <tr> <td>浮點(diǎn)數(shù)</td> <td>float</td> <td><input type="text" name="float" controlName="浮點(diǎn)數(shù)" 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>網(wǎng)址</td> <td>url</td> <td><input type="text" name="url" controlName="網(wǎng)址" dataType="url" /></td> </tr> <tr> <td>電話</td> <td>phone</td> <td><input type="text" name="phone" controlName="電話" dataType="phone" /></td> </tr> <tr> <td>手機(jī)</td> <td>mobile</td> <td><input type="text" name="mobile" controlName="手機(jī)" 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號(hào)碼</td> <td>qq</td> <td><input type="text" name="qq" controlName="QQ號(hào)碼" 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>
