JavaWeb开发中关于JS校验的代码优化问题

        先来说一下场景，我们常常在提交表单中需要用到JS校验，用于在提交前保证用户输入的正确性。比如在一个登录页面中，我们需要输入用户名、密码或验证码，如果缺少其中之一，则登录不能通过，代码如下：

if ($("#username").val() == "" || $("#password").val() == "") {
alert("用户名或密码不能为空！");
return false; }

        这样是不是看起来很简洁呢？只有两三个字段而已，当然简洁啦！试想一下，如果是一个注册页面，我们需要校验的字段就很多了，如果像上面一样写代码，岂不是要写许多相似度很高的代码？这样会造成代码高度冗余，后期维护起来也不易，每个id都需要查找。所以，不建议用这种检验方式来做JS验证。看下面的一张表格：



        这张表比较复杂，需要校验的字段很多，其中还有两两组合校验的，如果用之前的校验方法，就需要写大量的相似度极高的代码，在这里我们可以使用jquery来遍历表单的方法做校验，这种情况下只需要十行左右的代码就可以了。

var flag = true; // 初始化标签为true
$(".validateTable tr td").each(function(){ // 开始遍历
var firstSel = $(this).children().find("option:selected").val(); // 获取第一个下拉框的值
var secondInput = $(this).children().find('.input-xlarge').val(); // 获取第二个输入框的值
if((firstSel && !secondInput) || (!firstSel && secondInput)){ // 必须保证第一个下拉框和第二个输入框都不能为空
tdHtml = '<label style="float: left" for="name" class="error">输入错误，请检查！</label>'; // 初始化错误提示
$(this).next().html(tdHtml); // 把错误提示加在当前元素的后面
flag = false; // 不符合要求的标签变为false
}
})
if(flag){
form.submit(); // 提交表单
}else{
closeLoading(); // 关闭正在加载
}

总结：1、 写这种代码优化的思路就是找重复。2、判断一个值是否存在，可以写成!a，不必写成：a != NULL || a != ''。