JavaScript 表單驗證控制項

 

引子

　　你是否被頁面上這樣的驗證煩死：

view source

print?

function checkForm(){

if(document.getElementById("<%=this.textbox1.ClientID%>").value.length ==0){

alert("不可為空");

return false;

}

又或者你已經封裝了JS庫，又或者你在用一些JS驗證外掛程式，但是還是得不停的一遍一遍寫著正則,提示資訊，等待返回結果.恩，我跟你一樣，也煩透了！於是，我便做了個毛坯，到今天，把這個毛坯蓋成了個茅草屋。好吧，來看看驗證要做些什麼工作吧。

介紹與使用

　　Step 1:引入JS檔案和CSS檔案

　　Step 2:拖入一個驗證控制項 選擇驗證類型，能否為空白，提示資訊等自己所需要的東西，這個例子中，我只選擇了驗證類型為郵箱，然後預設的允許為空白改成了NO，不允許為空白，其餘都使用預設設定,

　　Step 3:開始吧

　　3.1: 這時候，滑鼠hover上文字框的時候，右邊出現了預設的提示，當然，有時候根據布局，你也可以調整Tip的方向,忘了說了，頁面上還放了個提交按鈕，給它添加了一個用戶端事件

　　3.2: 點擊提交按鈕，頁面無變化，驗證不通過

　　3.3: 輸入不匹配的字元，當文字框失去焦點的時候，提示驗證沒通過

　　3.4:輸入格式正確，OK

恩，其實驗證我們就選了兩下，驗證就搞定了，我覺得蠻好，你覺得呢?

其實文字框的完成，基本的驗證已經可以了，但是還有諸多的控制項radio,radiobuttonlist,check,checkboxlist,select... 去他大爺的.OK,罵了它我也心裡爽多了，繼續吧：

OK，都可以了，只是驗證提醒的樣式忒醜了點，而且在IE下有更醜，如果您有更好看的實現，請發一份給我，我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 Regex,tip 提示資訊,canempty 能否為空白,然後用JS進行正則驗證，通過驗證的結果來添加 刪除CSS，這裡要注意的是，checkbox，radio產生出來的代碼多了一個SPAN標籤，checkboxlist，radiobuttonlist產生出來之後多了table標籤，在JS檔案中，我把它們的驗證和文字框的驗證分開了，獨立了一個checkAspnetRadioCheckbox方法來進行驗證。本來可以擴充這些控制項來添加標籤，但是我覺得驗證控制項一多，對程式員反而是不好的事，找還找半天。權衡一下，還是用醜陋的方法實現比較划得來。

後記

　　tip使用的是一個JQuery外掛程式，tipsy，有興趣的同志可以去研究一下。

　　其實要做的還有很多:組驗證，2個文字框值比較，Ajax驗證，想到不常用，所以沒必要加上，不能把功能越做越多，使得使用更複雜，而且JS功力不深，功能越多隻能使代碼越亂，這些需求還是靠自己的雙手來完成吧 - -！

　　恩,總體來說沒有什麼技術含量，純體力活，發出來是希望，1.為不知道的朋友提供一個思路 2.希望大家能協助指點，讓這個東東能更好用，說實在的，如果開發中小型項目，用起來還是挺爽的。3.在大家的協助下，自己的能力也同時得到提高。恩，晚安大夥，明天見。關於服務端的驗證可以看我這篇文章：CommonLibrary之Validation,我希望在後面做的代碼產生器中，能把2種驗證給結合起來。

 

原始碼下載請點擊這裡

 

來源：http://www.cnblogs.com/mmmjiang13/archive/2010/09/03/1816500.html