来吧,让狗日的验证来的更猛烈些吧!

引子

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

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

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

posted @ 2010-09-03 00:59  活雷锋  阅读(8279)  评论(51编辑  收藏  举报