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;
}

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