此表单验证器是基于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进行监听。
效果图不是很好看,不过还是上图一张: