Vue + ElementUI 复杂表单验证及数据提交全攻略

2024-01-29 06:58:22

前言

在实际开发中，我们经常会遇到各种各样的复杂表单。这些表单不仅需要验证输入的正确性，还需要处理各种各样的数据提交逻辑。如果我们使用传统的表单处理方式，很容易导致代码冗余和维护困难。

为了解决这个问题，我们可以使用 Vue + ElementUI 来构建可复用的表单组件。通过使用策略模式，我们可以轻松管理表单数据和提交逻辑，从而简化代码结构并提高代码的可维护性。

一、构建可复用的表单组件

首先，我们需要构建一个可复用的表单组件。这个组件应该包含两个方法：validate 和 getData。validate 方法用于验证表单数据的正确性，getData 方法用于获取表单数据。

<template>
  <div>
    <el-form ref="form" :model="formData" :rules="rules" @submit="onSubmit">
      <el-form-item prop="username">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="formData.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    validate() {
      return this.$refs.form.validate()
    },
    getData() {
      return this.formData
    },
    onSubmit() {
      if (this.validate()) {
        this.$emit('submit', this.getData())
      }
    }
  }
}
</script>

二、使用策略模式管理表单数据和提交逻辑

接下来，我们需要使用策略模式来管理表单数据和提交逻辑。首先，我们需要定义一个抽象类，这个抽象类应该包含两个方法：validate 和 submit。validate 方法用于验证表单数据的正确性，submit 方法用于提交表单数据。

class FormStrategy {
  constructor(form) {
    this.form = form
  }

  validate() {
    throw new Error('必须实现 validate 方法')
  }

  submit() {
    throw new Error('必须实现 submit 方法')
  }
}

然后，我们需要定义几个具体的策略类，这些策略类分别负责处理不同的表单数据和提交逻辑。

class LoginStrategy extends FormStrategy {
  constructor(form) {
    super(form)
  }

  validate() {
    return this.form.validate()
  }

  submit() {
    return this.$http.post('/login', this.form.getData())
  }
}

class RegisterStrategy extends FormStrategy {
  constructor(form) {
    super(form)
  }

  validate() {
    return this.form.validate()
  }

  submit() {
    return this.$http.post('/register', this.form.getData())
  }
}

三、使用可复用表单组件和策略模式简化代码结构

最后，我们可以使用可复用表单组件和策略模式来简化代码结构。我们可以将表单组件和策略类作为子组件和父组件来使用。子组件负责处理表单数据的验证和获取，父组件负责处理表单数据的提交逻辑。

<template>
  <div>
    <form-component ref="form" @submit="onSubmit"></form-component>
  </div>
</template>

<script>
import FormComponent from './form-component.vue'

export default {
  components: { FormComponent },
  data() {
    return {
      strategy: new LoginStrategy(this.$refs.form)
    }
  },
  methods: {
    onSubmit() {
      if (this.strategy.validate()) {
        this.strategy.submit().then(() => {
          // 表单提交成功后的处理逻辑
        })
      }
    }
  }
}
</script>