Validate表单验证不起作用（请求后端接口验证）

秒速五厘米 2023-06-21 10:20 7阅读 0赞

callBack() 多写了，保证函数中**有且只有一个**callBack()可以执行，如果多了的话它也不知道执行哪一个就会不起作用，少写的话也会有错误

简单记录一下我使用过程中犯过的两个错误：

1、callBack() 多写了，导致验证的时候不起作用

2、callBack() 少写了，导致不能进入 this.$refs.editForm.validate() 函数中

顺便写一下请求后端接口的方法：

需求：1、验证邮箱重复（从后端获取）2、验证邮箱格式正确 3、验证不为空

/*
    * 邮箱验证
    * */
    export const EMAIL_REG = /^[a-zA-Z0-9_-]{6,30}@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
    export function validateEmail(rule, value, callback) {
      let loginInfo = JSON.parse(localStorage.getItem('loginInfo'));
      if (value) {
        if (!EMAIL_REG.test(value)) {
          callback(new Error('请输入有效的邮箱'));
          return;
        }
        if (loginInfo.email !== value) {
          checkLoginEmail({
            email: value
          })
            .then(res => {
              callback();
            })
            .catch(err => {
              callback(new Error(err.data.msg));
            });
        } else {
          callback();
        }
      } else {
        callback();
      }
    }

稍微说一下，我的代码中有一句代码是

let loginInfo = JSON.parse(localStorage.getItem('loginInfo'));

主要是在编辑列表的时候，获取原来的邮箱，和新输入的进行比较，如果一样就不用请求后台接口，反之则请求（原因：如果没有这句代码的话，后台会以为这个也是重复的，编辑就必须要改邮箱，不太合理）

ok:还有什么问题，欢迎提问，有可能会看不到