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

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.lryc.cn/news/544097.html

相关文章:

  • Trae根据原型设计稿生成微信小程序密码输入框的踩坑记录
  • 【数据结构】 最大最小堆实现优先队列 python
  • 基于多层感知机(MLP)实现MNIST手写体识别
  • QT和有道词典有冲突,导致内存溢出,闪退。
  • 4. 示例:创建带约束的随机地址生成器(范围0x1000-0xFFFF)
  • VSCode轻松调试运行C#控制台程序
  • 内容中台是什么?内容管理平台解析
  • sqlmap:自动SQL注入和数据库接管工具
  • Python设置阿里云镜像源教程:解决PIP安装依赖包下载速度慢的问题
  • 基于专利合作地址匹配的数据构建区域协同矩阵
  • Java集合List快速实现重复判断的10种方法深度解析
  • List的模拟实现(2)
  • 如何使用SaltStack批量替换SSL证书方案
  • Golang快速上手01/Golang基础
  • [Web 安全] 反序列化漏洞 - 学习笔记
  • 【学习笔记】Google的Lyra项目:基于神经网络的超低比特率语音编解码技术
  • Unity Dedicated Server 控制台 输出日志LOg 中文 乱码
  • 【Excel】 Power Query抓取多页数据导入到Excel
  • 去耦电容的作用详解
  • HTTPS 与 HTTP 的区别在哪?
  • let、const【ES6】
  • openharmony5.0中hdf框架中实现驱动程序的动态加载和管理的技术细节分析
  • TVS管学习记录
  • 数据库表的各种设计
  • JWT使用教程
  • 【大模型系列篇】如何解决DeepSeek-R1结构化输出问题,使用PydanticAl和DeepSeek构建结构化Agent
  • 老旧android项目编译指南(持续更)
  • linux中安装部署Jenkins,成功构建springboot项目详细教程
  • AI开发利器:Anaconda
  • java网络编程--基于TCP协议的网络编程