当前位置：首页 > news >正文

vue3表单验证的时候访问接口如果有值就通过否则不通过.主动去触发校验

news 来源：原创 2025/5/19 2:00:22

页面有个身份证号码的校验。校验完身份证格式是否符合之后还要去访问接口查询这个用户是否存在。如果存在才通过验证。否则就校验不通过

<el-form ref="ruleFormRef" :model="form" label-width="140px" label-position="right" label-suffix=" :" :rules="rules">
  <el-form-item label="身份证号" prop="idCard1">
    <el-input v-model="form.idCard" />
  </el-form-item>
</el-form>

// 身份证校验。格式校验+接口查询是否已登记信息
const checkIdCardMore = async (rule, value, callback) => {
  const regexp=/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i;
  if(value===""||value===undefined) callback("请输入身份证号");
  if (!regexp.test(value)) {
    callback(new Error("请输入正确的身份证号"));
  } else {

 // 模拟接口请求，这里你需要替换为实际的接口地址和参数
    let {data} = await 接口名({idCard: form!.idCard});
    if (data != null) {//查到这个人
      form!.name = data.residentName;
      form.id = data.id;
      return callback()
    } else {//没有查到
      form.name = '';
      callback(new Error("未查到当前用户的入住登记信息"));
    }
  }
};

const rules = reactive({
  idCard: [{required: true, trigger: 'blur',validator: checkIdCardMore}],
});