当前位置: 首页 > article >正文

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

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

<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}],
});

http://www.kler.cn/a/564715.html

相关文章:

  • Expert Domain-Driven Design (DDD) Implementation in .NET 2024-10
  • 一键部署Ollama deepSeek:科技赋能,轻松上手
  • RAGFlow基础操作手册
  • Linux Kernel Connection Tracking Table
  • 前端开发--node.js
  • LE AUDIO广播学习笔记之BASE
  • vim临时文件泄露
  • 第四届工程管理与信息科学国际学术会议 (EMIS 2025)
  • ​Vue3 常用指令、属性、方法速查表
  • 【Oracle专栏】Oracle 之 回收站
  • 保护密码等敏感信息的几个常用方法
  • 如何制作安装包打包软件
  • 千峰React:Hooks(上)
  • 【Linux】线程详解
  • 文件操作 -- IO [Java EE 初阶]
  • LangChain教程 - RAG - PDF问答
  • (八)Java-Collection
  • (面试经典问题之无锁队列篇)无锁队列的基本原理及其作用
  • 【easy视频 | day01】项目了解 + 登录注册 + 使用 token 作为客户端请求令牌
  • 2.4 自动化评测答疑机器人的表现-大模型ACP模拟题-真题