web development blog

> 前端技术 通用的表单即时验证

在开发过程中,对于表单这一块大家都不陌生。对于表单的验证,可以是客户端,也可以是服务端后台验证。一般我们都会利用javascript,在客户端就进行表单项的验证,分摊服务器的压力,避免处理那些恶意随便乱填的请求。

 

我们在客户端用js对用户输入的数据进行验证也有很多方式,有人是在用户点击提交表单的时候对表单项进行验证,也有人在用户输入数据时,对当前表单项进行实时验证,这样带来更好的用户体验,也可以即时帮用户校验输入信息的正确性。

 

不同的业务需求,就有不同的表单项,我们如何制作一个表单模块,适合所有表单需求?当然已经存在很多表单验证的插件,也很丰富。只需要我们学习他们的api就可以可以很快是使用它们,帮住我们解决表单验证的繁琐。利用插件,就是你要遵守他们的规则,而不是你想要怎样就怎样。

 

成熟的插件很多,也很强大,并不是说他们不好。只是,有时候不想引入多一个js插件来解决,就在网上转了下,看了写表单验证效果,自己diy了一个通用模块,以后直接拿来就可以用了。代码不多,支持正则验证。

 

例子演示:表单效果演示

下面是部分code:

/**
 * 简单的表单验证 
 * demo:
 * 		input type="text" calss="require" rule="xxx" 
 * 说明:
 *      class="reguire" 可选,如果有则表示必填不为空
 *      rule = "xxxx"   可选,加强验证,正则扩展
 */
var jqFormElements = $('div.fBox .filed input,div.fBox .filed textarea');
	jqFormElements.bind({
		focus:function(){$(this).parents('.filed').addClass('focus');},
		blur:function(){
			var _this = $(this),
				_val = _this.val(),
				_rule = _this.attr('rule'),
				_parent = _this.parents('.filed').removeClass('focus'),
				isTrue = false;
				
				//判断顺序: 正则(有值)|| (是否必填) ? 返回值 : true; 
				isTrue = (_rule&&_val) ? 
						 (new RegExp(_rule,'i')).test(_val) : 
						 (_this.hasClass('require') ? _val : true);
				isTrue ? _parent.removeClass('err').addClass('sucess') :
						 _parent.removeClass('sucess').addClass('err');
			
			
		}
	})

 

附件下载:通用表单源文件

 

-留言评论-

  • 留言载入中...

-拍砖-

 

首页|前端技术|编程/php|生活|关于我

Copyright © 2012 wmhfly.com