Element-Plus中的表单校验

以当前这个注册表单为例：

表单校验最关键的有两个数据需要准备好
首先要准备好表单数据，即username,password，repassword
其次是校验规则rules

1. 以下是这个表单所涉及到的三个属性

const formModel = ref({
  username: '',
  password: '',
  repassword: ''
})

2. 将表单属性绑定到的model属性

<el-form :model="formModel">

3. 定义表单校验规则rules,这里先以username为例

const rules = {
  // username表示校验的属性
  // 和下文中表单项中的prop对应
  username: [
    // require表示是否要填写    // message  是校验失败时触发的提示
    // // trigger 是触发方式   blur: 失焦时触发  change: 发生变化时触发
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    // min: 最小长度  max: 最大长度
    { min: 3, max: 6, message: '用户名长度必须在3-6之间', trigger: 'blur' }
  ]
}

rules是一个对象，username中存放数组，数组中的每一个元素都是一个对象，代表着具体的校验规则

4. 接下来就可以看到成果了
   
5. 补齐剩下的校验规则

const rules = {
  // username表示校验的属性
  // 和下文中表单项中的prop对应
  username: [
    // require表示是否要填写    // message  是校验失败时触发的提示
    // // trigger 是触发方式   blur: 失焦时触发  change: 发生变化时触发
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    // min: 最小长度  max: 最大长度
    { min: 3, max: 6, message: '用户名长度必须在3-6之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    // pattern: 正则表达式，当前表示6-15位非空字符
    { pattern: /^\S{6,15}$/, message: '密码必须使6-15位的非空字符' }
  ],
  repassword: [
    // 这里还可以传自定义校验规则
    {
      // rlue: 表示传入的rules规则 value: 当前输入框的值 callback: 回调函数
      validator: (rule, value, callback) => {
        // 判断当前表单的值和password是否相等
        if (value !== formModel.value.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback() // 成功了也要回调，否侧可能会出错
        }
      }
    }
  ]
}

表单校验大功告成！