【Vue3】注册功能【el-form】

实现注册校验

【需求】注册页面基本校验

1. 用户名非空，长度校验5-10位
2. 密码非空，长度校验6-15位
3. 再次输入密码，非空，长度校验6-15位

【进阶】再次输入密码需要自定义校验规则，和密码框值一致（可选）

1. el-form => :model="ruleForm" ：绑定的是绑定的整个form的数据对象 { xxx, xxx, xxx }。

   为了方便校验，我们需要将ruleForm绑定在el身上

   ruleForm绑定的是form对象，这个form对象是用来收集当前表单里全部的表单数据的

2. el-form => :rules="rules" ：绑定的整个rules规则对象 { xxx, xxx, xxx }，form中可能有多个表单数据，里面的分别对应三个校验规则，所以rules是要基于ruleForm里的数据进行实现的。

3. 表单元素 => v-model=“ruleForm.xxx” 给表单元素，绑定form的子属性

4. el-form-item => prop 配置生效的是哪个校验规则 (和rules中的字段要对应)

步骤：

1. model 属性绑定 form 数据对象

数据将来是需要提交给后台的，不能自己编，应该看我们的接口文档

// 整个用于提交的form数据对象
const formModel = ref({
  username: '',
  password: '',
  repassword: ''
})

<el-form :model="formModel" >

2. v-model 绑定 form 数据对象的子属性

<el-input
  v-model="formModel.username"
  :prefix-icon="User"
  placeholder="请输入用户名"
></el-input>
... 
(其他两个也要绑定)

3. rules 配置校验规则

rules并不需要是响应式的，所以直接提供一个普通对象即可

rules里的字段名需要与formModel里的字段名要统一。

规则是个数组，表示可以配置很多条规则。每个规则都是个对象。

trigger：什么时候触发，blur —> 失焦时校验，change —> 实时校验，不写的话，默认是change。

<el-form :rules="rules" >
    
<script setup>
// 整个表单的校验规则
// 1. 非空校验 required: true      message消息提示，  trigger触发校验的时机 blur change
// 2. 长度校验 min:xx, max: xx
// 3. 正则校验 配置pattern字段: 正则规则    \S 非空字符
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 10, message: '用户名必须是5-10位的字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是6-15位的非空字符',
      trigger: 'blur'
    }
  ],
  repassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是6-15的非空字符',
      trigger: 'blur'
    },
    {
      validator: (rule, value, callback) => {
        if (value !== formModel.value.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}
</script>

4. prop 绑定校验规则

注意prop校验规则需要往el-form-item上面配

<el-form-item prop="username">
  <el-input
    v-model="formModel.username"
    :prefix-icon="User"
    placeholder="请输入用户名"
  ></el-input>
</el-form-item>
... 
(其他两个也要绑定prop)