v-model 自定义组件与 ElementUI form 强强联合，表单校验一把罩

2023-11-26 06:30:28

前言

在前端开发中，表单是必不可少的元素之一。为了确保用户输入的数据的准确性，表单校验是至关重要的。Vue.js 提供了丰富的 API 来进行表单校验，而 ElementUI 则提供了许多现成的表单组件，可以帮助我们轻松构建表单。在本文中，我们将重点介绍如何将 v-model 自定义组件与 ElementUI form 表单相结合，以实现强大的表单校验功能。

基本概念

v-model 自定义组件

v-model 自定义组件是 Vue.js 提供的一种强大的功能，它允许我们创建自己的自定义组件，并将其用作表单元素。使用 v-model 自定义组件，我们可以轻松实现表单数据的双向绑定，并对表单数据进行校验。

ElementUI form 表单

ElementUI 是一个优秀的 Vue.js UI 组件库，它提供了许多现成的表单组件，可以帮助我们轻松构建表单。ElementUI form 表单组件提供了丰富的功能，包括表单校验、表单提交等。

使用 v-model 自定义组件和 ElementUI form 进行表单校验

步骤一：创建 v-model 自定义组件

首先，我们需要创建一个 v-model 自定义组件。在组件中，我们需要定义一个名为 value 的 prop，并使用 v-model 指令将 value prop 与组件的内部状态绑定起来。

<template>
  <div>
    <input type="text" v-model="value">
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      internalValue: this.value
    }
  },
  watch: {
    value(newValue) {
      this.internalValue = newValue
    },
    internalValue(newValue) {
      this.$emit('input', newValue)
    }
  }
}
</script>

步骤二：在 ElementUI form 表单中使用 v-model 自定义组件

接下来，我们需要在 ElementUI form 表单中使用 v-model 自定义组件。在表单中，我们需要使用 el-form-item 组件来包装 v-model 自定义组件，并使用 prop 属性将 value prop 绑定到 v-model 自定义组件的 value prop。

<el-form>
  <el-form-item label="用户名">
    <v-model-input v-model="username"></v-model-input>
  </el-form-item>
  <el-form-item label="密码">
    <v-model-input v-model="password"></v-model-input>
  </el-form-item>
</el-form>

步骤三：对表单数据进行校验

最后，我们需要对表单数据进行校验。可以使用 ElementUI 提供的 el-form 组件的 rules 属性来定义表单校验规则。

<el-form :rules="rules">
  <!-- 表单元素 -->
</el-form>

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 15, message: '用户名长度必须在 3 到 15 个字符之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 18, message: '密码长度必须在 6 到 18 个字符之间', trigger: 'blur' }
  ]
}