深入解析Element-UI el-form和el-form-item的奥秘（下）

前言

在上一篇文章中，我们对el-form和el-form-item是如何配合进行校验进行了深入分析。今天，我们将继续探讨el-form的奥秘，着重关注除了model之外的其他props。

rules属性

el-form除了model之外，还提供了一个非常重要的props：rules。rules是一个对象，可以包含多个校验规则，每个校验规则都由一个type属性和一个message属性组成。type属性指定了校验规则的类型，而message属性则指定了校验失败时的提示信息。

下面是一个使用rules属性的示例：

<el-form :model="form">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username"></el-input>
    <el-form-item-rules :rules="usernameRules"></el-form-item-rules>
  </el-form-item>
</el-form>

export default {
  data() {
    return {
      form: {
        username: ''
      },
      usernameRules: [
        { type: 'required', message: '用户名不能为空' },
        { type: 'min', message: '用户名长度不能少于6个字符' },
        { type: 'max', message: '用户名长度不能超过18个字符' }
      ]
    }
  }
}

在上面的示例中，我们定义了一个名为usernameRules的rules对象，其中包含了三个校验规则：

• type: 'required'：表示用户名不能为空。
• type: 'min'：表示用户名长度不能少于6个字符。
• type: 'max'：表示用户名长度不能超过18个字符。

当用户输入用户名时，el-form会自动对输入的值进行校验。如果校验失败，el-form会显示相应的提示信息。

size属性

size属性用于指定表单组件的大小。el-form支持三种大小：large、default和small。

<el-form size="large">
  <!-- 表单组件 -->
</el-form>

export default {
  data() {
    return {
      formSize: 'large'
    }
  }
}

在上面的示例中，我们设置了表单组件的大小为large。这样，所有的表单组件都会以大尺寸显示。

disabled属性

disabled属性用于禁用表单组件。当表单组件被禁用时，用户无法与之交互。

<el-form :disabled="isDisabled">
  <!-- 表单组件 -->
</el-form>

export default {
  data() {
    return {
      isDisabled: false
    }
  }
}

在上面的示例中，我们使用isDisabled数据来控制表单组件是否禁用。当isDisabled为true时，表单组件将被禁用。

validate方法

validate方法用于对表单组件进行校验。当调用validate方法时，el-form会对所有表单组件进行校验。如果校验失败，el-form会返回一个包含错误信息的数组。

this.$refs.form.validate((valid) => {
  if (valid) {
    // 表单校验通过
  } else {
    // 表单校验失败
  }
});

在上面的示例中，我们使用$refs.form.validate()方法来对表单组件进行校验。如果校验通过，我们将执行valid函数。如果校验失败，我们将执行else函数。

结语

本篇文章对el-form和el-form-item的props进行了详细的解析，包括rules属性、size属性、disabled属性和validate方法。通过这些props，我们可以灵活地配置表单组件，满足不同的需求。希望本篇文章能够帮助您更好地理解和使用Element-UI的表单组件。