编写校验规则

常规校验

const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur'}
    ]
}

自定义校验：检查两次输入的密码是否一致

//校验密码的函数
const validateConfirmPassword = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入密码'))
    } else if (value !== registerData.value.password) {
        callback(new Error('两次密码不一致'))
    } else {
        callback()
    }
}
//在校验规则中引用
confirmPassword: [
      {validator: validateConfirmPassword, trigger: 'blur'}
  ]

注册表单绑定校验规则

el-form 标签使用:rules="rules"绑定校验规则，el-form-item使用prop 指定校验项