Element-Plus Form 表单验证 Prop 和 Rules 设置建议

2022-11-05 20:26:35

在 Element-Plus 中运用 Prop 和 Rules 构建可靠的表单验证

前言

表单验证是构建健壮 Web 应用程序的关键，它确保用户输入的数据符合特定规则，从而提高数据完整性和应用程序安全性。在 Element-Plus UI 框架中，Prop 和 Rules 扮演着至关重要的角色，使你能够轻松实施复杂的表单验证逻辑。本文将深入探讨 Prop 和 Rules 的设置约定，并揭示一些常见的陷阱和解决方案。

Prop 和 Rules 的设置约定

Prop 是表单项的属性，它指定字段的名称。Rules 是验证规则的集合，它们定义了表单项必须满足的条件。在 Element-Plus 中，Prop 和 Rules 的设置遵循以下约定：

Prop： 表单项的 Prop 必须与模型中的字段名称相同。例如，如果模型中字段名为 "name"，那么表单项的 Prop 也应为 "name"。

Rules： 验证规则可以通过两种方式设置：

通过 props 属性设置： 可以使用 props 属性直接将验证规则传递给表单项。示例：

<el-form-item prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
  <el-input v-model="model.name"></el-input>
</el-form-item>

通过 RuleForm 属性设置： RuleForm 属性是一个特殊的属性，用于指定一系列表单验证规则。通过 RuleForm 属性设置验证规则更具灵活性，可以实现更复杂的验证逻辑。示例：

<el-form :model="model" :rules="ruleForm">
  <el-form-item prop="name">
    <el-input v-model="model.name"></el-input>
  </el-form-item>
  <el-form-item prop="age">
    <el-input v-model="model.age"></el-input>
  </el-form-item>
</el-form>

const ruleForm = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' }
  ]
}