JavaScript 表单验证控件[转]
引子
你是否被页面上这样的验证烦死：
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 正则表达式,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
