elementplus表单验证

### Element Plus 表单验证实现方法

#### 使用内置验证规则
Element Plus 提供了一套丰富的内置验证规则来简化开发者的操作。这些规则可以直接应用于表单项，从而快速设置常见的验证逻辑。

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleFormRef">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="ruleForm.username"></el-input>
  </el-form-item>
</el-form>

为了使上述代码正常工作，还需要定义 `ruleForm` 对象以及相应的验证规则 `rules`：

const ruleForm = reactive({
  username: ''
})

const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ]
})

这段代码展示了如何利用内置的验证规则来进行基本的数据校验[^1]。

#### 自定义验证函数
对于更复杂的需求，则可以通过编写自定义验证器来增强灵活性。这允许开发者根据业务逻辑创建特定条件下的验证机制。

import { ElMessage } from 'element-plus'

// 定义一个异步验证器作为例子
asyncValidator(rule, value, callback) {
  setTimeout(() => {
    if (value !== 'hello') {
      callback(new Error('错误消息'))
    } else {
      callback()
    }
  }, 1000)
}

const customRules = reactive({
  specialField: [
    { validator: asyncValidator, trigger: 'change' }
  ]
})

此部分说明了怎样通过自定义验证器扩展默认的功能范围。

#### 处理多个表单实例
当页面存在多个独立运作的表单时，应当注意避免重复使用相同的 `ref` 属性名。因为 Vue 中 `ref` 应该保持唯一性；如果多个地方共享同一个名字可能会导致意外行为——比如只触发最后一个同名引用的行为。

<!-- 错误示范 -->
<form-one ref="formRef"/>
<form-two ref="formRef"/>

<!-- 正确做法 -->
<form-one ref="firstFormRef"/>
<form-two ref="secondFormRef"/>

这里强调了正确管理不同表单间的关系的重要性，防止因不当命名引起的冲突问题[^3]。