十几层的if else怎么优化啊

huitailang
  • 91
check() {
    if(this.checkUsername(this.username)) {
        if(this.checkIdCard(this.idCard)) {
            if(this.checkTel(this.tel)) {
                if(this.dbr == '担保人是本人') {
                    if(document.querySelector('.sfzzm img')) {
                        console.log('存在身份证正面')
                        if(document.querySelector('.sfzfm img')) {
                            console.log('存在身份证反面')
                            if(document.querySelector('.xlzs img')) {
                                console.log('存在学历证书')
                                if (this.ydxy) {
                                    this.tijiaoIsShow = false
                                }
                            } else {
                                Toast('请上传学历证书')
                                this.tijiaoIsShow = true
                            }
                        } else {
                            Toast('请上传身份证反面')
                        }
                    } else {
                        Toast('请上传身份证正面')
                    }
                } else if(this.dbr == '担保人不是本人') {
                    if(this.checkUsername(this.dbrname)) {
                        if(this.checkIdCard(this.dbridCard)) {
                            if(this.checkTel(this.dbrzyzh)) {
                                if(document.querySelector('.sfzzm img')) {
                                    console.log('存在身份证正面')
                                    if(document.querySelector('.sfzfm img')) {
                                        console.log('存在身份证反面')
                                        if(document.querySelector('.xlzs img')) {
                                            console.log('存在学历证书')
                                            this.tijiaoIsShow = false
                                        } else {
                                            Toast('请上传学历证书')
                                        }
                                    } else {
                                        Toast('请上传身份证反面')
                                    }
                                } else {
                                    Toast('请上传身份证正面')
                                }
                            } else {
                                Toast('请输入担保人展业证号')
                            }
                        } else {
                            Toast('请输入担保人身份证号')
                        }
                    } else {
                        Toast('请输入担保人姓名')
                    }
                }else {
                    Toast('请选择担保人是否为本人')
                }
            } else {
                Toast('请输入正确的电话号码')
            }
        } else {
            Toast('请输入正确的身份证号')
        }
    } else {
        Toast('请输入正确的姓名')
    }
}

clipboard.png
上面的信息都填写好了,提交按钮才会显示,但是这样太low了,for循环也不是太好,有什么办法优化一下呢

回复
阅读 4.3k
6 个回答
raymond
  • 152
✓ 已被采纳

如果只是嫌嵌套多的话,可以一段一段地表达出意思,不必嵌在一起

比如:

if(!this.checkUsername(this.username)){
    Toast('请输入正确的姓名');
    return;
}
if(!this.checkIdCard(this.idCard)){
    Toast('请输入正确的身份证号');
    return;
}

当前面判断不过,不让他继续往下执行,如果后面哪个判断条件不需要了,就直接删除这块代码

先用数组存起来关系,再用arr.find(条件)来处理

可以用switch...case会好一点 不过建议使用面向对象
如:

 var option = {
    "checkUsername" : checkUsernameFunc();
    "checkIdCard": checkIdCardFunc();
    .
    .
    .
        }
西飞切切
  • 17
const reg = {
  username: {
    value: '',
    require: true,
    reg: '',//正则表达式
    error: {
      emptyMsg: '用户名不能为空'//用户名为空时提示
      regMsg: '用户名不合法'//用户名不合法时提示
    }
  }
}

const validate = (data)=> {

          let res = {
              bool: true,
              msg: ''
          };

          for (let k in data) {
              let o = data[k];
        //验证是否为空
        if (o.require&&typeof o.value != 'undefined'&& o.value.length == 0) {
          res.bool = false;
          res.msg = res.emptyMsg;

          return res;
        }
        
        
        //验证是否合法
        if (typeof o.value != 'undefined' && o.value.length > 0 && o.reg && !o.reg.test(o.value)) {
                      res.bool = false;
                      res.msg = o.regMsg;
                      return res;
              }

      }

          return res;

      }

validate(res);

只是想解决问题的话,楼上高赞方法就行。但想正规点,或者动态的话,构造一个类似责任链的结构。比如入参是一个数组,每个元素都是一个可以返回布尔值的方法,如果是该方法返回真则执行下一个,否则就返回错误信息。
ps.校验有现成的插件不如用现成的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏