来吧，让狗日的验证来的更猛烈些吧！

引子

　　你是否被页面上这样的验证烦死：

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种验证给结合起来。

　　源代码下载请点击这里，如果觉得对您有帮助，请帮我点下推荐，下次我帮你点 - -！

转载于:https://www.cnblogs.com/mmmjiang13/archive/2010/09/03/1816500.html