Element UI 表单验证实现指南 - 使用内置规则和方法

Element UI 的表单验证是通过使用内置的校验规则和方法来实现的。以下是实现表单验证的一般步骤：

1. 引入 Element UI 组件库：在项目中引入 Element UI 的相关组件和样式文件。

2. 创建表单：使用 Element UI 的表单组件'el-form'来创建表单。可以设置'model'属性来绑定表单数据。

3. 设置验证规则：使用'rules'属性来设置每个表单字段的验证规则。可以使用内置规则（如'required'、'min'、'max'等）或自定义规则。

4. 显示错误信息：使用'el-form-item'组件来包裹每个表单字段，并设置'prop'属性来与验证规则中的字段名相对应。当表单字段的值不满足验证规则时，会显示相应的错误信息。

5. 执行验证：可以手动触发表单的验证，或者通过'el-form'的'validate'方法来进行验证。验证结果会通过回调函数返回。

6. 提交表单：当表单验证通过后，可以执行相应的提交操作。

以下是一个简单的示例代码：

<template>
  <el-form :model='form' :rules='rules' ref='form' label-width='80px'>
    <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: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字值' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 提交表单操作
        } else {
          // 表单验证不通过
        }
      });
    }
  }
};
</script>

在上述代码中，'form'对象表示表单数据，'rules'对象表示验证规则。'el-form'组件中的'ref'属性用于获取表单实例，可以通过'validate'方法进行表单验证。

详细的验证规则和验证方法可以参考 Element UI 的官方文档。