elementui的表单验证

Element UI 提供了一套简单易用的表单验证功能。你可以使用 Element UI 提供的验证规则对表单进行验证。

首先，你需要在表单项中添加 `:rules` 属性来设置验证规则。这个属性的值是一个数组，每个数组元素代表一个验证规则对象。例如：

<el-form-item label="姓名" prop="name">
  <el-input v-model="formData.name" :rules="nameRules"></el-input>
</el-form-item>

在上面的例子中，通过 `:rules="nameRules"` 将 `nameRules` 数组设置为姓名输入框的验证规则。

接下来，你需要定义 `nameRules` 数组，可以在 Vue 组件的 `data` 选项中定义：

data() {
  return {
    formData: {
      name: ''
    },
    nameRules: [
      { required: true, message: '请输入姓名', trigger: 'blur' },
      { min: 2, max: 10, message: '姓名长度在 2 到 10 个字符', trigger: 'blur' }
    ]
  };
}

在上面的例子中，我们定义了两条验证规则：`required` 表示必填字段，`min` 和 `max` 分别表示最小长度和最大长度。`message` 属性是验证失败时显示的错误提示信息。

最后，你需要使用 Element UI 提供的方法来触发表单验证。比如，你可以在提交按钮的点击事件中调用 `this.$refs.form.validate()` 来进行表单验证。示例代码如下：

<el-button type="primary" @click="submitForm">提交</el-button>

methods: {
  submitForm() {
    this.$refs.form.validate(valid => {
      if (valid) {
        // 表单验证通过，执行提交操作
      } else {
        // 表单验证失败，显示错误信息
      }
    });
  }
}

以上就是使用 Element UI 进行表单验证的基本步骤，你可以根据自己的需求定义更多的验证规则和定制错误提示信息。