在 Element UI 的 el-form 组件中，可以通过设置验证规则来对表单数据进行验证。验证规则可以通过 rules 属性传入一个验证规则对象数组，每个字段对应一个验证规则。

以下是一个示例，展示了如何使用验证规则进行表单验证：

<template>
  <el-form :model="form" :rules="rules" ref="myForm" label-width="100px">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model.number="form.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: null
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '姓名长度在 2 到 10 个字符之间', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字', trigger: 'blur' },
          { validator: this.validateAge, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          // 表单验证通过，执行提交操作
          console.log('表单验证通过');
        } else {
          // 表单验证未通过
          console.log('表单验证未通过');
          return false;
        }
      });
    },
    validateAge(rule, value, callback) {
      if (value < 0 || value > 120) {
        callback(new Error('年龄必须在 0 到 120 之间'));
      } else {
        callback();
      }
    }
  }
};
</script>

在上述示例中，el-form 组件使用 model 属性绑定了一个名为 form 的表单数据对象，同时通过 rules 属性指定了验证规则。

其中，rules 对象的键是表单字段名，值是一个验证规则数组。每个验证规则对象可以设置多个属性，常用的有：

• required: 是否必填，值为 true 或 false

• min: 最小长度或数值

• max: 最大长度或数值

• type: 类型，可选值为 'string', 'number', 'boolean', 'method', 'regexp', 'integer', 'float', 'array', 'object', 'enum', 'date', 'url', 'email'', 'hex', 'ipv4' 或 'ipv6'

• validator: 自定义验证函数，该函数接收三个参数：rule - 当前验证规则对象，value - 当前字段的值，callback - 验证完成后的回调函数

在模板中，每个表单项通过 el-form-item 包裹，并使用 prop 属性指定对应的字段名。验证规则会根据字段名自动匹配到对应的表单项。

在提交表单时，可以通过调用 validate 方法来进行表单验证。该方法接收一个回调函数，在回调函数中判断验证结果。

以上是基本的表单验证规则示例，你也可以根据具体需求进行更复杂的验证规则定义。希望以上信息能帮助到你！

本文标签： Element