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

引子

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

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 活雷锋 阅读(5600) 评论(51) 编辑 收藏

 回复 引用 查看   
#1楼 2010-09-03 07:27 金色海洋(jyk)      
我的自定义控件也是这么做的,只是验证提示方式的地方比较简单。

========
radiobuttonlist生成出来之后多了table标签,在JS文件中,我把它们的验证和文本框的验证分开了,独立了一个checkAspnetRadioCheckbox方法来进行验证
========

这个radiobuttonlist 是怎么实现的呀。
我的自定义控件还没有解决这个问题。

 回复 引用 查看   
#2楼 2010-09-03 08:20 麦舒      
看起来挺不错的。
 回复 引用 查看   
#3楼 2010-09-03 08:41 relax      
支持服务器端认证吗?
 回复 引用 查看   
#4楼 2010-09-03 08:46 xiaochitang      
烤鸭
 回复 引用 查看   
#5楼 2010-09-03 08:58 Q      
标题很粗俗,没有别的选者了吗
 回复 引用 查看   
#6楼 2010-09-03 09:00 bdnet      
恩 思路挺不错的 减少了很多麻烦
 回复 引用 查看   
#7楼 2010-09-03 09:11 菜鸟毛      
想法挺好的!!
个人认为给控件强加的属性多了点,这样可能不利于页面的整洁,而且会让你的验证太过暴露,能否把tip,reg,class这些封装到函数中,然后从页脚的脚本中去绑定控件的事件呢。个人意见。

 回复 引用 查看   
#8楼 2010-09-03 09:13 Adam哥      
自从有了jquery.validate,腰不酸了,腿不疼了,吃麻麻更香了
 回复 引用 查看   
#9楼[楼主] 2010-09-03 09:13 活雷锋      
@Q
呵呵 夸张的标题来吸引人进来,选者是因为在Demo中,能看明白就好了~

 回复 引用 查看   
#10楼[楼主] 2010-09-03 09:14 活雷锋      
@金色海洋(jyk)
海洋大哥,在源代码中有,遍历table 或者span,找出控件的选中数,统计和是不是和正则一样

 回复 引用 查看   
#11楼[楼主] 2010-09-03 09:20 活雷锋      
@菜鸟毛
恩 你说的对,但是如果这样做,又走了老路子,又得手动去写很多代码

 回复 引用 查看   
#12楼[楼主] 2010-09-03 09:27 活雷锋      
@Adam哥
恩,jquery.validate 和 猫冬 的验证,都很强

 回复 引用 查看   
#13楼 2010-09-03 09:30 szyicol      
真希望有一天哪个公司能把前台代码能够搞得舒服一点!!!

现在很痛苦



 回复 引用 查看   
#14楼 2010-09-03 09:32 风海迷沙      
“请选者一个”?
 回复 引用 查看   
#15楼 2010-09-03 10:08 Iris蝴蝶花      
提示比较漂亮,数字验证有点问题。
 回复 引用 查看   
#16楼[楼主] 2010-09-03 10:20 活雷锋      
@Iris蝴蝶花
请问什么问题?

 回复 引用 查看   
#17楼[楼主] 2010-09-03 11:54 活雷锋      
@风海迷沙
:)

 回复 引用 查看   
#18楼 2010-09-03 11:59 桀骜的灵魂      
我觉得验证还是后台做的,而且必须是属于领域对象自身的,分离出来处理,哪怕是同一层的东西,都有过分设计的感觉。
 回复 引用 查看   
#19楼 2010-09-03 12:31 liyf      
嬉笑怒骂成文章,就冲这个孟达哥,我顶你!
 回复 引用 查看   
#20楼 2010-09-03 12:54 Wei.SteVe      
@桀骜的灵魂
模块化的设计,复用来说。
这种处理方法我还是蛮喜欢的。

 回复 引用 查看   
#21楼 2010-09-03 13:07 猫之良品      
楼主真是花心思,控件应该挺好用的。

不过我觉得表单验证这种个体功能,直接调用个jquery插件更来得方便,用控件实现的话,控件太多不方便,定制也不方便。比较了解jquery的,其实用控件和用自己封装个JS类效率上差不多,有时候可能自己写会更快捷。

但对于不懂jquery的新手来说倒是救命草。

 回复 引用 查看   
#22楼 2010-09-03 13:23 BillBibby      
控件在一个弹出遮罩层边缘,验证出错的显示就不能在右边,会把元素挤开。
如果页面元素比如select通过代码加了边框样式,这个还能用不呢。
lz的思路是很好的,验证的确麻烦且纷繁复杂。

 回复 引用 查看   
#23楼[楼主] 2010-09-03 13:56 活雷锋      
@BillBibby
弹出遮罩层我没有试验呢~
页面元素比如select通过代码加了边框样式的话,其实可以在初始化验证jS类中就是checkform方法中,指定验证的CSS名字,可以叫美工或者自己做个比较好看的,适用的样式,自由发挥

 回复 引用 查看   
#24楼[楼主] 2010-09-03 13:57 活雷锋      
@猫之良品
恩 谢谢你,只是就算是调插件,我们还得手工干不少活 我的目的是说少写点代码

 回复 引用 查看   
#25楼 2010-09-03 15:23 镜涛      
@活雷锋
呵呵,可以动态根据属性来绑定,写个加载模块即可。不过全部用动态加载的方式,控件很多的情况下性能肯定有较大的损耗。
全部属性都放到html中,特别是正则之类牵涉到验证的,对安全有影响

 回复 引用 查看   
#26楼 2010-09-03 16:08 uxspy      
以前做过类似的东西,不过验证用的m$的那些个valiator
不过,我也越来越倾向于不要再封到控件里去,明明是客户端的事情(不过在asp.net里这不是先例,什么m$的那套ajax)

 回复 引用 查看   
#27楼 2010-09-03 16:09 uxspy      
咦?雷锋?我才看到,这你的博啊,呵呵
 回复 引用 查看   
#28楼[楼主] 2010-09-03 16:15 活雷锋      
@uxspy
哈哈 uxspay~ 幸会幸会~

 回复 引用 查看   
#29楼 2010-09-03 17:31 uxspy      
我喜欢你的头像,我喜欢你这种粗旷的性格
 回复 引用 查看   
#30楼 2010-09-03 18:35 chris_thanks      
还是得写代码, 等html5吧 到时就不用做代码工了
 回复 引用 查看   
#31楼 2010-09-03 22:10 曹聪      
哇塞,谢谢,研究一下,最近正在苦恼,感觉MS的验证控件和Jquery.validate之类都有些麻烦

.Net技术群108412141
共同学习.Net技术,分享.Net学习资料,分享.Net工作机会

 回复 引用 查看   
#32楼 2010-09-03 22:16 Cocos      
验证,我从来都是在后台做的。。
 回复 引用 查看   
#33楼 2010-09-04 10:06 Alex He      
标题啊,封装的不错
 回复 引用 查看   
#34楼 2010-09-04 18:19 C'est la vie      
你用的什么工具啊
 回复 引用 查看   
#35楼 2010-09-05 15:46 liuhaitao      
下载完,解决方案"VerficationTextBoxDemo"打不开。可以给我发一个完整的吗?
liuhaitao-84625@163.com

 回复 引用 查看   
#36楼 2010-09-06 16:15 ToBin      
头像很个性!
 回复 引用 查看   
#37楼 2010-09-07 08:57 sunlovesea      
怎么不能下载源文件了..
 回复 引用 查看   
#38楼 2010-09-07 10:58 一叶堂主人      
标题夸张了些
 回复 引用 查看   
#39楼 2010-09-08 17:57       
不错的idea~
不过貌似我的JS和CSS一样那么差,毫无审美观念,支持下
MARK+1

 回复 引用 查看   
#40楼 2010-09-09 09:52 滔滔踏浪      
不错,就是源代码下载不了
 回复 引用 查看   
#41楼 2010-09-09 11:39 myx      
很不错,支持顶你一下。哈哈
 回复 引用 查看   
#42楼 2010-09-09 17:02 禅艺哲      
可惜代码下载不了了。
 回复 引用 查看   
#43楼 2010-09-10 09:13 Todd.Zhao      
可惜啊。好文章。大清早就看到这个。太振奋人心了。

就是想看下源码。研究研究

 回复 引用 查看   
#44楼 2010-09-10 11:25 无邪兮      
不错.
扩展textbox控件.
请问提供源码供学习吗?

 回复 引用 查看   
#45楼[楼主] 2010-09-13 16:04 活雷锋      
@sunlovesea
@滔滔踏浪
@禅艺哲
@Todd.Zhao
@无邪兮
不好意思 用的时候发现一个BUG 没有对正则异常进行处理 ~ 改过之后传上来了

 回复 引用 查看   
#46楼 2010-10-13 16:37 DavidHHuan      
哟~那泥,我很公开的
 回复 引用 查看   
#47楼 2010-11-13 10:58 zhyp5320      
飘过~~
 回复 引用 查看   
#48楼 2010-11-30 15:30 lizhihuan      
飘过~~
 回复 引用 查看   
#49楼 2010-12-04 12:22 wenbo      
飘过~~
 回复 引用 查看   
#50楼 2010-12-11 17:45 xx小屁孩      
飘过~~
 回复 引用 查看   
#51楼 2010-12-11 18:00 xx小屁孩      
期待后续文章,关注!