引子
你是否被页面上这样的验证烦死：
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代码是：
Select，CheckboxList，Checkbox的HTML代码是：
</ 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插件，，有兴趣的同志可以去研究一下。
其实要做的还有很多:组验证，2个文本框值比较，Ajax验证，想到不常用，所以没必要加上，不能把功能越做越多，使得使用更复杂，而且JS功力不深，功能越多只能使代码越乱，这些需求还是靠自己的双手来完成吧 - -！
恩,总体来说没有什么技术含量，纯体力活，发出来是希望，1.为不知道的朋友提供一个思路 2.希望大家能帮助指点，让这个东东能更好用，说实在的，如果开发中小型项目，用起来还是挺爽的。3.在大家的帮助下，自己的能力也同时得到提高。恩，晚安大伙，明天见。关于服务端的验证可以看我这篇文章：,我希望在后面做的代码生成器中，能把2种验证给结合起来。
源代码下载请点击
来源：