基于Vant组件库的表单校验

页面长这样：

表单校验：
1. 双向数据绑定
2. 配置 Rules 数组 - 查看文档
3. 把校验规则抽离到独立的模块里方便复用（比如手机号校验，不止在登录页用到呢）
4. 校验全部通过后才能点击登录发送请求，点击登录后二次校验
  4.1 van-button 需要写 native-type = "submit"
  4.2 van-form 身上监听submit事件，submit事件会在提交表单校验通过后触发 （验证不通过不会触发）
  4.3 提供函数，然后处理提交事件

Rules数组规则：

实现代码：

# 表单结构

  
  
  

    
      我已同意
      用户协议
      及
      隐私条款
    
  
  

    登 录
  
  

    忘记密码？
  

# src / utils / 新建 rules.ts

const mobileRules = [
  { required: true, message: '请输入手机号' },
  {
    pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
    message: '手机号格式不正确'
  }
]
const passwordRules = [
  { required: true, message: '请输入密码' },
  {
    pattern: /^\w{8,24}$/,
    message: '密码需8-24个字符'
  }
]

export { mobileRules, passwordRules }

End-------------------------