Loading...

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

在很多情况下,我们对表单中的某些字段需要在客户端做简单的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;
}


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

标签:,
发表于 2008-04-21 09:45:21 目录:HTML客户端, 网站技术 [RSS 2.0] 你可以发表评论, 或者从您的网站 trackback
已经有4位大师动手指导 拒绝低俗
  • 1楼 muzik 在2008.04.21 12:23发表评论如下: 回复

    我也补充几句
    this.value在JQuery里一般写作$(this).val(),也可以写作$(this).attr(‘value’)
    if(this.value.length < 1)则可以写作if($(this).val()==”)
    传统的JS写法让我比较的纠结 所以习惯全用JQuery的写法

    JQuery有一些非官方的form插件和Validation插件,写的很完备,含空值校验、长度校验、email和uri之类固定格式校验等等常用校验。需要的时候也可以直接取用。

    • 1楼附属品 cosβ 在2008.04.21 12:30发表评论如下: 回复

      呵呵,我比较喜欢写短一点嘛,精简代码,所写成this.value,插件我用得少,不想因为少量的应用而引入大量的js!alert做举例使用,一般的话我会用div高亮来提示呢!

      • 1楼附属品 muzik 在2008.04.21 12:48发表评论如下: 回复

        那是 this.value.length应该还比$(this).val()快一点

    • 2楼 muzik 在2008.04.21 12:24发表评论如下: 回复

      另,alert很让人不爽…

      评论分页: 1
      (Required)
      (Required, not published)
      如果留言未显示无需重复留言,我将为你恢复!