【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进行监听。

  效果图不是很好看，不过还是上图一张：

 

评论

2 楼 every_best 2010-09-01  

lgstarzkhl 写道

这个还不如用jqeury的验证插件呢

恩，比不上大牛的，只是作为自己学习js练手用的。

1 楼 lgstarzkhl 2010-08-31  

这个还不如用jqeury的验证插件呢