当前位置: 代码迷 >> Web前端 >> 【YUI组件】基于YUI的表单应验器
  详细解决方案

【YUI组件】基于YUI的表单应验器

热度:80   发布时间:2012-11-07 09:56:10.0
【YUI组件】基于YUI的表单验证器

此表单验证器是基于YUI的,其实也只是使用到YUI的一些基础特性,比如对Dom和事件的封装,所以只需引入yahoo-dom-event.js文件。?? 整个表单验证器是以正则为核心来验证的,有扩展性,只需添加相应的正则就行。默认提供了时间、日期时间、email的正则表达式。

?

? 呃,不是美工,效果不怎么好看,最简版的验证器。特色在于验证的时候只需提供验证的类型,以及验证错误时应提示何种信息,就可以达到验证的效果。

?

?? 页面元素:

<form id="fm" >
			<div><label for="name">验证最大最小值</label><input type="text" id="name" name="name" title="type:intVal;min:50;max:60;info:不好;" /></div>
			<div><label for="password">验证日期时间</label><input type="text" id="password" name="password" title="type:dataTimeVal;info:时间格式不正确;" /></div>
			<div><label for="css">验证email</label><input id="css" type="text" name="css" title="type:emailVal;info:email格式不正确;"/></div>
			<div><label for="html">验证textArea</label><textarea id="html" name="html" title="validator: not empty;info:不能为空;"></textarea></div>
			<div><label for="javascript">验证正则情况</label><input type="text" id="javascript" name="javascript" title="validator:^\\d{1,2}$;info:正则..;"/></div>
			<div><label for="yui">yui</label><input type="text" id="yui" name="yui" /><br/></div>
</form>
?
?? 页面像上面定义一样,然后用js new一个验证器就可以达到验证的效果, 如果想要边编写边验证,调用startListener进行监听。
? 效果图不是很好看,不过还是上图一张:
?



1 楼 lgstarzkhl 2010-08-31  
这个还不如用jqeury的验证插件呢
2 楼 every_best 2010-09-01  
lgstarzkhl 写道
这个还不如用jqeury的验证插件呢

恩,比不上大牛的,只是作为自己学习js练手用的。
  相关解决方案