你是否被頁面上這樣的驗證煩死:
function checkForm()
{
if(document.getElementById("<%=this.textbox1.ClientID%>").value.length ==0)
{
alert("不能為空");
return false;
}
}
又或者你已經(jīng)封裝了JS庫,又或者你在用一些JS驗證插件,但是還是得不停的一遍一遍寫著正則,提示信息,等待返回結果.恩,我跟你一樣,也煩透了!于是,我便做了個毛坯,到今天,把這個毛坯蓋成了個茅草屋。好吧,來看看驗證要做些什么工作吧。
介紹與使用
Step 1:引入JS文件和CSS文件
Step 2:拖入一個驗證控件 選擇驗證類型,能否為空,提示信息等自己所需要的東西,這個例子中,我只選擇了驗證類型為郵箱,然后默認的允許為空改成了NO,不允許為空,其余都使用默認設置,
Step 3:開始吧
3.1: 這時候,鼠標hover上文本框的時候,右邊出現(xiàn)了默認的提示,當然,有時候根據(jù)布局,你也可以調整Tip的方向,忘了說了,頁面上還放了個提交按鈕,給它添加了一個客戶端事件
3.2: 點擊提交按鈕,頁面無變化,驗證不通過
3.3: 輸入不匹配的字符,當文本框失去焦點的時候,提示驗證沒通過
3.4:輸入格式正確,OK
恩,其實驗證我們就選了兩下,驗證就搞定了,我覺得蠻好,你覺得呢?
其實文本框的完成,基本的驗證已經(jīng)可以了,但是還有諸多的控件radio,radiobuttonlist,check,checkboxlist,select... 去他大爺?shù)?OK,罵了它我也心里爽多了,繼續(xù)吧:
OK,都可以了,只是驗證提醒的樣式忒丑了點,而且在IE下有更丑,如果您有更好看的實現(xiàn),請發(fā)一份給我,我JS和CSS很差 :P,感激不盡。
原理
看下源代碼,什么都知道了,Textbox通過瀏覽器查看到的HTML代碼是:
<input type="text" canempty="No" tip="請輸入正確的郵箱地址格式" reg="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" id="TCTextBox1" name="TCTextBox1" gtbfieldid="19" class="verifyfailure">
Select,CheckboxList,Checkbox的HTML代碼是:
<select reg="0{1,}" tip="請選者一個" id="DropDownList1" name="DropDownList1" gtbfieldid="20" class="verifyfailure">
<option value="" selected="selected"></option>
<option value="aaaaaaa">aaaaaaa</option>
<option value="bbbbbbb">bbbbbbb</option>
<option value="cvvvvvv">cvvvvvv</option>
</select>
<table border="0" reg="0{3,}" tip="請選者3個" id="CheckBoxList1" original-title="" class="verifyfailure">
<tbody><tr>
<td><input type="checkbox" name="CheckBoxList1$0" id="CheckBoxList1_0"><label for="CheckBoxList1_0">aaaa</label></td><td><input type="checkbox" name="CheckBoxList1$1" id="CheckBoxList1_1"><label for="CheckBoxList1_1">bbb</label></td><td><input type="checkbox" name="CheckBoxList1$2" id="CheckBoxList1_2"><label for="CheckBoxList1_2">ccc</label></td>
</tr>
</tbody></table>
<span reg="0{1,}" tip="請選者" class="verifyfailure"><input type="radio" value="RadioButton1" name="RadioButton1" id="RadioButton1"></span>
恩,擴展TextBox控件,添加了自定義屬性reg 正則表達式,tip 提示信息,canempty 能否為空,然后用JS進行正則驗證,通過驗證的結果來添加 刪除CSS,這里要注意的是,checkbox,radio生成出來的代碼多了一個SPAN標簽,checkboxlist,radiobuttonlist生成出來之后多了table標簽,在JS文件中,我把它們的驗證和文本框的驗證分開了,獨立了一個checkAspnetRadioCheckbox方法來進行驗證。本來可以擴展這些控件來添加標簽,但是我覺得驗證控件一多,對程序員反而是不好的事,找還找半天。權衡一下,還是用丑陋的方法實現(xiàn)比較劃得來。