【Vue3+Ts project】vant4 form表单校验流程

一. form表单校验

1.校验输入框

作用: 获取输入框焦点后就效验

      <van-field
        :rules="mobileRules"
        placeholder="请输入手机号"
      ></van-field>

const mobileRules = [
    { required: true, message: '请输入手机号' },
    {pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确手机号'}
]

      <van-field
        placeholder="请输入密码"
        :rules="passwordRules"
      ></van-field>

const passwordRules = [
    { required: true, message: '请输入密码' },
    {pattern: /^\w{8,16}$/, message: '请输入正确密码'}
]

2.提交时效验

描述：行内属性添加 native-type="submit" 当点击button提交按钮会效验输入框是否输入或输入是否正确
 

  <van-button native-type="submit">登 录</van-button>

3.绑定form点击登录后输出
描述: 点击button提交按钮后校验输入框内容是否满足,这里是做满足时的输出

<van-form autocomplete="off" @submit="login"></van-form>

const login = () => {
  console.log(`登录成功`)
}