Vant表单校验提示文本换成toast轻提示

规则设置

import { showToast, type FieldRule } from 'vant'

const valiMobile = (val: string) => {
  if (val === '') {
    showToast('手机号不能为空')
    return false
  } else if (!/^1[3|4|5|7|8][0-9]{9}$/.test(val)) {
    showToast('不是有效的手机号码')
    return false
  } else {
    return true
  }
}
const valiPassword = (val: string) => {
  if (val === '') {
    showToast('密码不能为空')
    return false
  } else if (!/^\w{6,12}$/.test(val)) {
    showToast('密码长度不能小于6位字符')
    return false
  } else {
    return true
  }
}

const mobileRules: FieldRule[] = [{ validator: valiMobile, trigger: 'onBlur' }]
const passwordRules: FieldRule[] = [
  { validator: valiPassword, trigger: 'onBlur' }
]

export { mobileRules, passwordRules }

使用： 直接在组件引使用即可

      <van-field
        v-model="password"
        :type="showPassword ? 'text' : 'password'"
        placeholder="请输入密码"
        :rules="passwordRules"
      >