在vue3+ts的项目中，如何解决vant组件自带表单校验不生效?

点击发送验证码后，为了让逻辑更加严谨，使用了vant 组件自带的表单校验，进行二次校验，防止验证码发送成功后，登录手机号被二次修改，但根据官网描述 cv之后不生效，甚至连获取验证码后的倒计时也不走了…

// 获取验证码
const getCo de = async () =&g t; {

// 节流:如果时间&g t;0就不执行
 if (time.value > 0) return

time.value = 10
const res = await getLo ginCo de(mobile.value, ‘login‘)
console.log(res, ‘获取验证码’)
code.value = res.data.code

// vant 自带的表单校验,防止验证码获取后,手机号再次被修改,再次校验不通过就阻止执行
 console.log(formRef.value, ‘fro mRef’)

formRef.value?.validate(‘mobile‘).catch((error) => {
console.log(error, ‘error‘)
})

timeId = setInt e r val(() => {
time.value -= 1
codeText.value = time.val ue + ‘s后再次获取‘
if (time.val ue < 1) {
codeText.val ue = ‘发送验证码’
return cle arInt e r val(tim eId)
}
}, 1000)
}

用catch 捕捉出来的错误是undefined，也就是validate 方法传参的name 没有值，检查发现是结构里面没加name 属性

修改后的代码如下：

<van-form auto com p let e=”off” @submit=”login” ref=”formRef”>
<van-field
name=”mobile“
v–model=”mobile“
:rules=”mobileRul es“
placeholder=”请输入手机号“
type=”tel“
></van-field>

在需要校验的表单项中加上name 属性就可以了

业务代码优化：

const getCo de = async () => {

// 节流:如果时间>0就不执行
 if (tim e.val ue > 0) return

time.val ue = 10
const res = await getLoginCode(m o bile.val ue, ‘login‘)
console.log(res, ‘获取验证码’)
code.val ue = res.data.code

// vant 自带的表单校验,防止验证码获取后,手机号再次被修改,再次校验不通过就阻止执行
// validate的返回值是一个 promise,但这里不需要接收返回值，直接加一个 await更简单

await formRef.v alue?.validate(‘m o b ile’)

timeId = setInter v al(() => {
time.v alue -= 1
codeText.v alue = time.v alue + ‘s后再次获取’
if (ti me.value < 1) {
codeText.value = ‘发送验证码’
return clearInterval(ti meId)
}
}, 1000)
}