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

最新推荐文章于 2025-12-01 00:07:29 发布

最新推荐文章于 2025-12-01 00:07:29 发布 · 196 阅读

文章标签：

#YUI #正则表达式 #JavaScript #CSS #Yahoo #ViewUI

YUI 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一款基于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进行监听。

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