欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > IT业 > vue3表单验证的时候访问接口如果有值就通过否则不通过.主动去触发校验

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

2025/3/1 1:45:53 来源:https://blog.csdn.net/qq_33769914/article/details/145909823  浏览:    关键词: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}],
});

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com