vue验证账号唯一性

Question

vue验证账号唯一性

<el-form-item label="账号" prop="no">
          <el-col :span="20">
            <el-input v-model="form.no"></el-input>
          </el-col>
        </el-form-item>



let checkDuplicate=(rule, value, callback) => {
      if (this.form.id){
        return callback();
      }
      this.$axios.get(this.$httpUrl +'/user/findByNo?no='+this.form.no).then(res=>res.data).then(res=>{
        if (res.data.code !==200){
          callback()
        }else {
          callback(new Error("账号已存在"))
        }
      })
    };



rules: {
        no: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur'},
          { validate: checkDuplicate, trigger: 'blur'}
        ]
}

这是findByNo方法的运行结果

现在输入重复的账号还是可以保存，为什么没有验证唯一性

Answer 1

引自免费微信小程序：皆我百晓生

根据您提供的Vue代码片段和后端接口返回结果，看起来您正在尝试验证表单中的账号（no）是否唯一。在checkDuplicate函数中，当后端返回的code为200时，您期望抛出错误提示“账号已存在”。但是目前即使输入重复账号仍能保存，可能是验证逻辑或触发时机存在问题。

请检查以下几点：

1. 后端接口逻辑：从图1所示的后端响应来看，当查询到结果时，total字段为0，这意味着没有找到与输入相同的账号。正常情况下，如果账号已存在，则total应大于0，并且您应该基于这个条件来判断账号是否唯一。请确保后端接口正确地返回了查找结果。

// 根据后端实际情况调整验证逻辑
let checkDuplicate = (rule, value, callback) => {
  if (this.form.id) {
    return callback();
  }
  this.$axios.get(this.$httpUrl + '/user/findByNo?no=' + this.form.no).then(res => res.data)
    .then(res => {
      if (res.code === 200 && res.total > 0) { // 更改为判断total是否大于0
        callback(new Error("账号已存在"));
      } else {
        callback();
      }
    })
    .catch(err => {
      console.error('验证账号唯一性时发生错误:', err);
      callback(); // 如果出现网络或其他错误，暂时允许通过验证
    });
};

1. 验证触发时机：请确认在提交表单前，blur事件已经成功触发了此验证规则。另外，为了确保用户在提交表单时再次进行校验，可以同时在submit事件上添加此验证规则。

2. 表单提交阻止：当验证失败时，Vue Element UI并不会自动阻止表单提交，您需要在表单的submit事件回调中处理验证结果，确保所有验证通过后再执行保存操作。

<el-form @submit.prevent="handleSubmit">

...

methods: {
  handleSubmit() {
    this.$refs['yourFormRef'].validate((valid) => {
      if (valid) {
        // 表单验证通过，执行保存操作
      } else {
        console.log('表单验证失败');
        return false; // 验证失败则阻止表单提交
      }
    });
  },
}

1. 确保异步验证完成：在上述代码中，由于使用了异步验证，请确保在调用callback方法之前异步请求已完成并得到了正确的响应数据。

综上所述，请检查您的后端接口返回值以及前端验证逻辑，确保它们协同工作以实现账号唯一性的验证。