十几层的if else怎么优化啊

Question

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('请输入正确的姓名')
    }
}

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

Answer 1

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

比如：

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

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

Answer 2

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

Answer 3

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

 var option = {
    "checkUsername" : checkUsernameFunc();
    "checkIdCard": checkIdCardFunc();
    .
    .
    .
        }

Answer 4

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

Answer 5

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

Answer 6

可以使用 Promise()
https://developer.mozilla.org...