Loading...

jQuery应用系列之 通过遍历进行快速表单验证

类归于: HTML客户端, Web技术|WEB Tech — 江东 @ 2008-04-21 09:45:21 才(4)条评论

在很多情况下,我们对表单中的某些字段需要在客户端做简单的js验证,比如不能为空。按照传统的方式,我们可能就会去写一个函数来一个一个判断表单中的字符是否为空,为空则返回false,譬如:

function validForm(){
if( ( document.getElementById('name').value.length < 1 )
&&( document.getElementById('pass').value.length < 1 )
&&( document.getElementById('email').value.length < 1 )
&&( document.getElementById('tel').value.length < 1 )
&&( document.getElementById('gendar').value.length < 1 )){
alert('带有*号的部分不能为空');return false;
}
}

那么如果使用了jQuery这一切可能便得更加简单,譬如下面这个表单

*

*

*

*


不知道你是否注意到,上面凡是打*好的表单域,我都用了一个css属性,那就是”important”,这样的好处有两点,1.我们可以在css中将必须填写的字段用特殊的样式表来显示;2.方便在jquery中遍历,下面是jquery简单表单验证的函数

function validForm(){
var is_not_valid = false;
$("#reg input.important").each(function(i){//遍历id=reg中的class=important的表单
if(this.value.length < 1){//如果表单为空
i ++ ;//增加i
is_not_valid = true;
if( i < 2 )//因为这个遍历循环无法用break跳出,只能通过i自增的方式让js只弹出一次alert
alert('带星号的必须填写');
this.focus();
}
});
if( is_not_valid ) return false;
}


表单域太少,所以也许你看不到这个的优点何在,但是一旦不能为空的表单数量很多,优势就明显了!

打算用jQuery改写这个模板

类归于: HTML客户端, Web技术|WEB Tech, Wordpress — 江东 @ 2008-01-30 16:43:30 才(20)条评论

最近做收费的程序已经做得比较累了,但是由于本人又不喜欢玩游戏,所以打算抽点时间来改版这个blog吧。不过这次不全面改版,没有那个精力了。接受dupola建议,初步决定装上zhiqiang的ajaxcomment插件,这样就能在留言本无限的回复了,由于这个插件调用了大约7k的js,打算再精简一下,于是乎准备同时也将这个插件改写了!

考虑到 jQuery的优良特性和瘦弱的体积(gzip之后只有10k左右),所以本站将采用jQuery来驱动,一方面为今后添加新的功能打下基础,另外一个方面也当作实验用,因为下一步的shopex要采用到这个脚本,bloggermap.org也将用jQuery来驱动。既然如此,同时将ajaxcomment中的js改用jQuery好了。

活着就是为了折腾,改版周期为一周!