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 != ''


       


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值