當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

（转）工作了一个星期各位一定累了吧，那我们一起来表单验证一番吧！

發(fā)布時(shí)間：2025/3/15 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了（转）工作了一个星期各位一定累了吧，那我们一起来表单验证一番吧！小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

原文地址：http://www.cnblogs.com/yexiaochai/archive/2013/06/01/3111699.html

前言

對(duì)于前端來(lái)說(shuō)，沒(méi)有做過(guò)表單驗(yàn)證是不可能的，但是，我們一般都是用的別人寫好的插件，反正都周末了，我們今天晚上就試著看看自己能不能寫一個(gè)出來(lái)試試呢？

PS：該產(chǎn)物純粹實(shí)驗(yàn)產(chǎn)品，丑陋之處請(qǐng)多見(jiàn)諒！

驗(yàn)證的類型

常見(jiàn)的表單驗(yàn)證一般有以下幾個(gè)：

① 非空驗(yàn)證

② 身份證驗(yàn)證

③ 數(shù)字驗(yàn)證（數(shù)字范圍驗(yàn)證）

④ 郵件驗(yàn)證

⑤ 手機(jī)驗(yàn)證

⑥ QQ驗(yàn)證

⑦ 中文/英文用戶名驗(yàn)證（可能含有AJAX類型驗(yàn)證）

⑧ 密碼驗(yàn)證/重復(fù)密碼驗(yàn)證

⑨ 單選框/下拉菜單/多選框驗(yàn)證

......

我那個(gè)去，簡(jiǎn)簡(jiǎn)單單一寫怎么會(huì)有這么多東西呢！！！！看來(lái)今天晚上有點(diǎn)吃緊了，沒(méi)事我們一步步來(lái)試試，確實(shí)不行也不會(huì)罰款，確實(shí)錯(cuò)了也沒(méi)人責(zé)備，我們錯(cuò)得起。

表單提示框

友好的提示框是第一位的，來(lái)來(lái)，比如我們這里有個(gè)文本框，我們需要實(shí)現(xiàn)如下提示框：

我們一個(gè)怎么做呢？而且提示框種類比較多，我們便不強(qiáng)求了，但是以下兩種也是很有可能出現(xiàn)的，我們是不是應(yīng)該考慮呢？

若是我們的網(wǎng)頁(yè)要求出現(xiàn)以上三種任意一種表現(xiàn)形式一完全合理的，所以我們還得都實(shí)現(xiàn)了！

但是實(shí)現(xiàn)前我們先干點(diǎn)其他事情，看看這段有意思的代碼吧：

三角形圖標(biāo)

這段代碼很有意思，我們來(lái)看看他將形成的圖形，以及去掉寬度與高度會(huì)形成的樣子：

這個(gè)圖形很怪，我們看著他的幾個(gè)邊框居然形成了三角形！！！！那我們是不是可以省略圖標(biāo)了呢？

以上這個(gè)東西各位應(yīng)該都比較清楚的，而且看著提示圖對(duì)他的使用也一定不言而喻，我這里還是贅述一下吧：

這就是圖標(biāo)的結(jié)構(gòu)，以下是CSS樣式：

.triangle_icon { position: absolute; } .triangle_icon div { border-style: solid; border-width: 6px; position: absolute; }/*上邊提示*/ .posTop .triangle_icon { width: 12px; height: 12px; bottom: -12px; } .posTop .triangle_icon .after { bottom: 1px; } .posTop .triangle_icon .after { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; } .posTop .triangle_icon .before { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; }

為了根據(jù)外部ClassName而設(shè)置不同的展示方式，而且不同的狀態(tài)擁有不同的樣式，最后形成了這個(gè)CSS：

.validateTips { min-width: 100px; border-radius: 2px; padding: 5px 10px; z-index: 500; position: absolute; font-size: 12px; } .validateInit { background: #FFFFE0; border: 1px solid #F7CE39; } .validateError { background: orange; border: 1px solid red; } .validateSuc { background: #79D62D; border: 1px solid Green; } .triangle_icon { position: absolute; } .triangle_icon div { border-style: solid; border-width: 6px; position: absolute; }/*上邊提示*/ .posTop .triangle_icon { width: 12px; height: 12px; bottom: -12px; } .posTop .triangle_icon .after { bottom: 1px; } .posTop .triangle_icon .after { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; } .posTop .triangle_icon .before { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; }/*右邊提示*/ .posRight .triangle_icon { width: 12px; height: 12px; left: -12px; } .posRight .triangle_icon .after { left: 1px; } .posRight .triangle_icon .after { border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } .posRight .triangle_icon .before { border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }/*下邊提示*/ .posBottom .triangle_icon { width: 12px; height: 12px; top: -12px; } .posBottom .triangle_icon .after { top: 1px; } .posBottom .triangle_icon .after { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; } .posBottom .triangle_icon .before { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; }/*初始化時(shí)候的皮膚*/ .validateInit .before { border-color: #F7CE39; } .validateInit .after { border-color: #FFFFE0; }/*失敗時(shí)候的皮膚*/ .validateError .before { border-color: red; } .validateError .after { border-color: orange; }/*成功時(shí)候的皮膚*/ .validateSuc .before { border-color: Green; } .validateSuc .after { border-color: #79D62D; }

定位提示框

提示框樣式有了，我們需要將它定位到特定的輸入框之上，所以我規(guī)定了以下格式（實(shí)驗(yàn)產(chǎn)物，勿笑）：

我們這里對(duì)需要驗(yàn)證的文本框做了一個(gè)約束：

① 要求指定ID（不知道需要不，但是考慮到漂浮提示以后的控制還是加上吧）

② 必須指定class擁有formValidate

③ 必須指定自定義屬性（json），將配置信息加上

于是我們加上js代碼：

<!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><title></title><style type="text/css">.form div { height: 30px; line-height: 30px; margin: 5px; }.validateTips { min-width: 100px; border-radius: 2px; padding: 5px 10px; z-index: 500; position: absolute; font-size: 12px; }.validateInit { background: #FFFFE0; border: 1px solid #F7CE39; }.validateError { background: orange; border: 1px solid red; }.validateSuc { background: #79D62D; border: 1px solid Green; }.triangle_icon { position: absolute; }.triangle_icon div { border-style: solid; border-width: 6px; position: absolute; }/*上邊提示*/.posTop .triangle_icon { width: 12px; height: 12px; bottom: -12px; }.posTop .triangle_icon .after { bottom: 1px; }.posTop .triangle_icon .after { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; }.posTop .triangle_icon .before { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; }/*右邊提示*/.posRight .triangle_icon { width: 12px; height: 12px; left: -12px; }.posRight .triangle_icon .after { left: 1px; }.posRight .triangle_icon .after { border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }.posRight .triangle_icon .before { border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }/*下邊提示*/.posBottom .triangle_icon { width: 12px; height: 12px; top: -12px; }.posBottom .triangle_icon .after { top: 1px; }.posBottom .triangle_icon .after { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; }.posBottom .triangle_icon .before { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; }/*初始化時(shí)候的皮膚*/.validateInit .before { border-color: #F7CE39; }.validateInit .after { border-color: #FFFFE0; }/*失敗時(shí)候的皮膚*/.validateError .before { border-color: red; }.validateError .after { border-color: orange; }/*成功時(shí)候的皮膚*/.validateSuc .before { border-color: Green; }.validateSuc .after { border-color: #79D62D; }</style><script src="js/jquery-1.7.1.min.js" type="text/javascript"></script><script src="js/yexiaochai_formValidator.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function () {$('.formValidate').each(function () {var el = $(this);var cfg = el.attr('data-cfg');if (cfg && cfg.length > 0) {cfg = eval('(' + cfg + ')');// cfg = JSON.parse(cfg);var initMsg = cfg.initMsg || '請(qǐng)?zhí)钊胄畔?#39;;var msgPosition = cfg.msgPosition || 'right';var id = el.attr('id') || new Date().getTime();var tips = $('<div class="validateTips validateInit" id="' + id + 'Tips"><div class="triangle_icon"><div class="before"></div><div class="after"></div></div>' + initMsg + '</div>');var offset = el.offset();var height = parseInt(el.outerHeight());var width = parseInt(el.outerWidth());var l = offset.left;var t = offset.top;if (msgPosition == 'bottom') {tips.addClass('posBottom');t += height + 4;} else if (msgPosition == 'right') {tips.addClass('posRight');l += width + 6;} else if (msgPosition == 'top') {tips.addClass('posTop');t += height * (-1) - 8;}tips.css({ left: l, top: t });$('body').append(tips);}}); //each});</script> </head> <body> <div class="form"><div>身份證：<input type="text" id="idCard" class="formValidate" data-cfg="{ initMsg: '請(qǐng)輸入身份證號(hào)碼！' }" /></div><div>數(shù)字：<input type="text" id="num" class="formValidate" data-cfg="{ initMsg: '請(qǐng)輸入數(shù)字', msgPosition: 'top'}" /></div><div>郵件：<input type="text" class="formValidate" data-cfg="{ initMsg: '請(qǐng)輸入郵箱地址！'}" /></div><div>手機(jī)：<input type="text" class="formValidate" data-cfg="{ msgPosition: 'bottom', initMsg: '請(qǐng)請(qǐng)輸入手機(jī)號(hào)碼！'}" /></div><div>QQ：<input type="text" class="formValidate" data-cfg="{ initMsg: '請(qǐng)請(qǐng)輸入手機(jī)號(hào)碼！'}" /></div><input type="button" value="提交" id="bt" /> </div> </body> </html> 位置的代碼

于是我們密密麻麻的形成了這個(gè)頁(yè)面，主要思路見(jiàn)代碼，我這里簡(jiǎn)單說(shuō)下：

1 根據(jù)class變量表單，獲取每個(gè)元素

2 定位到每個(gè)元素，根據(jù)其配置信息，將提示框插入文本，并定位之。

至此，我們提示框像個(gè)就結(jié)束了，后面點(diǎn)的內(nèi)容，我支支吾吾搞了好久都不太能推走了，我們接下來(lái)看看吧。

如何驗(yàn)證表單？

有了提示信息，另外一個(gè)問(wèn)題馬上就出現(xiàn)了

1 我應(yīng)該如何驗(yàn)證表單呢？正則表達(dá)式？如果我寫的不滿足后續(xù)需求呢？

2 如何實(shí)現(xiàn)密碼對(duì)比功能

3 如何實(shí)現(xiàn)選擇框等功能

4 如何實(shí)現(xiàn)非空驗(yàn)證功能

5 如何取消驗(yàn)證

6 取消驗(yàn)證后如何加上某項(xiàng)驗(yàn)證

......

一系列問(wèn)題拋了出來(lái)，我就邊寫邊思考，最后搞出來(lái)都面目全非了，形成了這樣的代碼：

js文件：

1 (function ($) {2 var FormValidator = function () {3 this.regexEnum = {4 idCard: /^[1-9]([0-9]{14}|[0-9]{16})([0-9]|X)$/,5 num: /^\-?([1-9]\d*)$/, //數(shù)字6 email: /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/,7 phone: /^1[3|4|5|8]\d{9}$/8 };9 this.validatorArr = {};10 };11 12 FormValidator.prototype.init = function () {13 var scope = this;14 $('.formValidate').each(function () {15 var el = $(this);16 scope.initItem(el);17 }); //each18 };19 20 FormValidator.prototype.initItem = function (el) {21 var scope = this;22 var cfg = el.attr('data-cfg');23 24 if (cfg && cfg.length > 0) {25 cfg = eval('(' + cfg + ')');26 // cfg = JSON.parse(cfg);27 var check = cfg.check || true,28 id = el.attr('id') || new Date().getTime(),29 initMsg = cfg.initMsg || '請(qǐng)?zhí)钊胄畔?#39;,30 sucMsg = cfg.sucMsg || '格式正確',31 errorMsg = cfg.errorMsg || '請(qǐng)注意格式',32 type = cfg.type || '',33 requred = cfg.requred || false,34 msgPosition = cfg.msgPosition || 'right';35 36 cfg.id = id;37 cfg.initMsg = initMsg;38 cfg.sucMsg = sucMsg;39 cfg.errorMsg = errorMsg;40 cfg.type = type;41 cfg.msgPosition = msgPosition;42 cfg.requred = requred;43 cfg.requredMsg = cfg.requredMsg || '該項(xiàng)必填';44 45 if (check) {46 var tips = $('<div class="validateTips validateInit" id="' + id + 'Tips"><div class="triangle_icon"><div class="before"></div><div class="after"></div></div>' + initMsg + '</div>');47 // var tips = $('<div class="validateTips validateInit" id="' + id + 'Tips">' + initMsg + '</div>');48 var offset = el.offset();49 var height = parseInt(el.outerHeight());50 var width = parseInt(el.outerWidth());51 var l = offset.left;52 var t = offset.top;53 if (msgPosition == 'bottom') {54 tips.addClass('posBottom');55 t += height + 4;56 } else if (msgPosition == 'right') {57 tips.addClass('posRight');58 l += width + 6;59 } else if (msgPosition == 'top') {60 tips.addClass('posTop');61 t += height * ( -1) - 8;62 }63 64 tips.css({ left: l, top: t });65 $('body').append(tips);66 cfg.el = el;67 cfg.tipEl = tips;68 69 el.focus(function () {70 scope.funcValidate(el, cfg);71 });72 el.blur(function () {73 scope.funcValidate(el, cfg);74 });75 el.keyup(function () {76 scope.funcValidate(el, cfg);77 });78 el.keydown(function () {79 scope.funcValidate(el, cfg);80 });81 cfg.validate = function () {82 scope.funcValidate(el, cfg);83 };84 scope.validatorArr[id] = cfg; //生成相關(guān)驗(yàn)證對(duì)象85 }86 87 } else {88 console.log('請(qǐng)輸入完整驗(yàn)證信息！否則控件會(huì)產(chǎn)生錯(cuò)誤！');89 }90 };91 92 FormValidator.prototype.funcValidate = function (el, cfg) {93 var id = cfg.id;94 95 //取消事件不執(zhí)行下面邏輯96 if (!this.validatorArr[id])97 return false;98 99 var type = cfg.type; 100 var requred = cfg.requred; 101 if (!type && !this.regexEnum[type]) { 102 return false; 103 } 104 var isPass = 0; //0初始狀態(tài)，1成功，-1錯(cuò)誤 105 var msg = ''; 106 var r = this.regexEnum[type] ? this.regexEnum[type] : type; 107 108 if (requred && el.val() == '') { 109 isPass = -1; 110 msg = cfg.requredMsg; 111 } else { 112 if (el.val() == '') { 113 isPass = 0; 114 msg = cfg.initMsg; 115 } else { 116 if (r.test(el.val())) { 117 isPass = 1; 118 msg = cfg.sucMsg; 119 } else { 120 isPass = -1; 121 msg = cfg.errorMsg; 122 } 123 } 124 } 125 if (isPass == 0) { 126 this.validatorArr[id]['tipEl'].removeClass('validateError'); 127 this.validatorArr[id]['tipEl'].removeClass('validateSuc'); 128 this.validatorArr[id]['tipEl'].addClass('validateInit'); 129 this.validatorArr[id]['tipEl'].html('<div class="triangle_icon"><div class="before"></div><div class="after"></div></div>' + msg); 130 } else if (isPass == 1) { 131 this.validatorArr[id]['state'] = 'success'; 132 this.validatorArr[id]['tipEl'].removeClass('validateError'); 133 this.validatorArr[id]['tipEl'].removeClass('validateInit'); 134 this.validatorArr[id]['tipEl'].addClass('validateSuc'); 135 this.validatorArr[id]['tipEl'].html('<div class="triangle_icon"><div class="before"></div><div class="after"></div></div>' + msg); 136 } else if (isPass == -1) { 137 this.validatorArr[id]['state'] = 'error'; 138 this.validatorArr[id]['tipEl'].removeClass('validateSuc'); 139 this.validatorArr[id]['tipEl'].removeClass('validateInit'); 140 this.validatorArr[id]['tipEl'].addClass('validateError'); 141 this.validatorArr[id]['tipEl'].html('<div class="triangle_icon"><div class="before"></div><div class="after"></div></div>' + msg); 142 } 143 }; 144 145 FormValidator.prototype.validatorAll = function () { 146 for (var k in this.validatorArr) { 147 var v = this.validatorArr[k]; 148 v.validate(); 149 } 150 }; 151 152 FormValidator.prototype.removeValidator = function (id) { 153 if (id && this.validatorArr[id]) { 154 // this.validatorArr[id].tipEl 155 this.validatorArr[id].tipEl.remove(); //刪除提示信息 156 delete this.validatorArr[id]; //刪除該驗(yàn)證項(xiàng)目 157 // this.validatorArr[id].el.unbind();//移除所有事件，但是考慮標(biāo)簽可能會(huì)有其他事件，此處暫時(shí)不予處理 158 var s = ''; 159 } 160 }; 161 162 FormValidator.prototype.addValidator = function (id) { 163 var el = $('#' + id); 164 this.initItem(el); 165 }; 166 167 FormValidator.prototype.validatorState = function () { 168 for (var k in this.validatorArr) { 169 var v = this.validatorArr[k]; 170 if (v.state == 'error') { 171 return false; 172 } 173 } 174 return true; 175 }; 176 window.FormValidator = FormValidator; 177 })(jQuery); View Code

html代碼：

<!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><title></title><style type="text/css">.form div { height: 30px; line-height: 30px; margin: 5px; }.validateTips { min-width: 100px; border-radius: 2px; padding: 5px 10px; z-index: 500; position: absolute; font-size: 12px; }.validateInit { background: #FFFFE0; border: 1px solid #F7CE39; }.validateError { background: orange; border: 1px solid red; }.validateSuc { background: #79D62D; border: 1px solid Green; }.triangle_icon { position: absolute; }.triangle_icon div { border-style: solid; border-width: 6px; position: absolute; }/*上邊提示*/.posTop .triangle_icon { width: 12px; height: 12px; bottom: -12px; }.posTop .triangle_icon .after { bottom: 1px; }.posTop .triangle_icon .after { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; }.posTop .triangle_icon .before { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; }/*右邊提示*/.posRight .triangle_icon { width: 12px; height: 12px; left: -12px; }.posRight .triangle_icon .after { left: 1px; }.posRight .triangle_icon .after { border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }.posRight .triangle_icon .before { border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }/*下邊提示*/.posBottom .triangle_icon { width: 12px; height: 12px; top: -12px; }.posBottom .triangle_icon .after { top: 1px; }.posBottom .triangle_icon .after { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; }.posBottom .triangle_icon .before { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; }/*初始化時(shí)候的皮膚*/.validateInit .before { border-color: #F7CE39; }.validateInit .after { border-color: #FFFFE0; }/*失敗時(shí)候的皮膚*/.validateError .before { border-color: red; }.validateError .after { border-color: orange; }/*成功時(shí)候的皮膚*/.validateSuc .before { border-color: Green; }.validateSuc .after { border-color: #79D62D; }</style><script src="js/jquery-1.7.1.min.js" type="text/javascript"></script><script src="js/yexiaochai_formValidator.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function () {var f = new FormValidator();f.init();f.validatorAll();var bt = $('#bt');var add = $('#add');var remove = $('#remove');var name = $('#name');bt.click(function () {var end = f.validatorState();var s = '';});add.click(function () {f.addValidator(name.val());var s = '';});remove.click(function () {f.removeValidator(name.val());var s = '';});});</script> </head> <body><input type="text" id="name" /><input type="button" value="取消驗(yàn)證" id="remove" /><input type="button" value="添加驗(yàn)證" id="add" /><div class="form"><div>身份證：<input type="text" id="idCard" class="formValidate" data-cfg="{ check: 'true', type: 'idCard', msgPosition: 'right', initMsg: '請(qǐng)輸入身份證號(hào)碼！', requred: true, sucMsg: '正確', errorMsg: '格式錯(cuò)誤'}" /></div><div>數(shù)字：<input type="text" id="num" class="formValidate" data-cfg="{ type: 'num', initMsg: '請(qǐng)輸入數(shù)字', msgPosition: 'top'}" /></div><div>郵件：<input type="text" class="formValidate" data-cfg="{ type: 'email', initMsg: '請(qǐng)輸入郵箱地址！'}" /></div><div>手機(jī)：<input type="text" class="formValidate" data-cfg="{ type: 'phone', initMsg: '請(qǐng)請(qǐng)輸入手機(jī)號(hào)碼！'}" /></div><div>QQ：<input type="text" class="formValidate" data-cfg="{ type: /^[1-9]*[1-9][0-9]*$/, initMsg: '請(qǐng)請(qǐng)輸入手機(jī)號(hào)碼！'}" /></div><div>用戶名：<input type="text" /></div><div>密碼：<input type="text" /></div><div>重復(fù)密碼：<input type="text" /></div><div>性別：<label><input type="radio" name="Gender" value="0" />男</label><label><input type="radio" name="Gender" value="1" />女</label></div><div>愛(ài)好：<label><input type="checkbox" name="aihao" value="0" />愛(ài)好1</label><label><input type="checkbox" name="aihao" value="1" />愛(ài)好2</label><label><input type="checkbox" name="aihao" value="0" />愛(ài)好3</label><label><input type="checkbox" name="aihao" value="1" />愛(ài)好4</label></div><input type="button" value="提交" id="bt" /></div> </body> </html> View Code

結(jié)語(yǔ)

晃晃悠悠幾個(gè)小時(shí)就過(guò)去了，今天的任務(wù)沒(méi)能完成！！！！

寫到后面就沒(méi)有詳細(xì)寫下去了，因?yàn)槲矣袔讉€(gè)問(wèn)題沒(méi)能解決，加之明天還要上班。。。。所以今天便不再堅(jiān)持了。

明天晚上希望能解決自己的疑問(wèn)，并整理下代碼，再詳加說(shuō)明吧。

轉(zhuǎn)載于:https://www.cnblogs.com/fcsh820/archive/2013/06/03/3116212.html

總結(jié)

以上是生活随笔為你收集整理的（转）工作了一个星期各位一定累了吧，那我们一起来表单验证一番吧！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： excel制作一个信息录入系统_制作Ex
下一篇： python exchangelib 删