vue+elementUI 复杂表单的验证、数据提交方案问题

下面是针对“vue+elementUI 复杂表单的验证、数据提交方案问题”的完整攻略。

验证

在 Vue 中使用 Vuelidate 可以非常方便地实现表单验证。首先，需要安装 Vuelidate：

npm install --save vuelidate

然后在 Vue 组件中引入 Vuelidate：

import { required } from 'vuelidate/lib/validators'

export default {
  validations: {
    form: {
      name: { required },
      email: { required, email },
      age: { integer, min: 18 }
    }
  },
  // ...
}

在上面的示例中，我们为表单中的每个字段添加了验证规则。例如，name 字段必填，email 字段必填并且是合法的电子邮件地址，age 字段必须是整数并且不能小于 18。在模板中可以使用 $v 对象来访问验证状态。例如：

<el-form :model="form">
  <el-form-item label="Name">
    <el-input v-model="form.name"></el-input>
    <div v-if="$v.form.name.$error">Name is required</div>
  </el-form-item>
  <el-form-item label="Email">
    <el-input v-model="form.email"></el-input>
    <div v-if="$v.form.email.$error">Email is invalid</div>
  </el-form-item>
  <el-form-item label="Age">
    <el-input type="number" v-model="form.age"></el-input>
    <div v-if="$v.form.age.$error">Age must be an integer of at least 18</div>
  </el-form-item>
</el-form>

在上面的示例中，我们使用了 $v.form.xxx.$error 来判断验证状态，并显示错误信息。

Vuelidate 还支持异步验证：

import { required } from 'vuelidate/lib/validators'

export default {
  validations: {
    async nameAvailable(value) {
      // 判断用户名是否已经存在
      const response = await checkNameAvailability(value)
      return response.available
    }
  },
  // ...
}

在上面的示例中，我们创建了一个名为 nameAvailable 的异步验证规则，并在其中使用 checkNameAvailability 函数来检查用户名是否已经存在。在模板中可以使用 $v.form.xxx.$pending 来访问异步验证状态。

提交

在 Vue 中使用 Axios 可以非常方便地发送 AJAX 请求。首先，需要安装 Axios：

npm install --save axios

然后在 Vue 组件中引入 Axios：

import axios from 'axios'

export default {
  // ...
  methods: {
    submitForm() {
      axios.post('/api/form', this.form)
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}

在上面的示例中，我们使用了 axios.post 发送了一个 POST 请求，并把表单数据作为参数传递了进去。当请求成功时，可以在 then 的回调函数中处理响应数据；当请求失败时，可以在 catch 的回调函数中处理错误信息。

可以通过 axios.defaults 来设置默认请求配置，例如添加请求头：

import axios from 'axios'

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN

export default {
  // ...
}

在上面的示例中，我们为 Axios 添加了一个默认的 Authorization 请求头，并将其设置为 AUTH_TOKEN。

示例

下面是一个基于 Vuelidate 和 Axios 实现表单验证和提交的示例。该示例是一个注册表单，包含用户名、电子邮件、密码、再次输入密码和性别等字段。在提交表单时，会检查用户名是否已经存在，如果不存在则发送注册请求。如果注册成功，则跳转到登录页面。

<template>
  <el-form :model="form" :rules="rules" ref="form" label-position="top" label-width="120px">
    <el-form-item label="Username" prop="username">
      <el-input v-model.trim="form.username"></el-input>
      <el-form-item-error v-if="!$v.form.username.required">Username is required</el-form-item-error>
      <el-form-item-error v-if="!$v.form.username.minLength">Username must have at least 6 characters</el-form-item-error>
      <el-form-item-error v-if="$v.form.username.$pending">Checking username availability...</el-form-item-error>
      <el-form-item-error v-if="!$v.form.username.$pending && !$v.form.username.nameAvailable">Username is already taken</el-form-item-error>
    </el-form-item>
    <el-form-item label="Email" prop="email">
      <el-input v-model.trim="form.email"></el-input>
      <el-form-item-error v-if="!$v.form.email.required">Email is required</el-form-item-error>
      <el-form-item-error v-if="!$v.form.email.email">Email is invalid</el-form-item-error>
    </el-form-item>
    <el-form-item label="Password" prop="password">
      <el-input type="password" v-model.trim="form.password"></el-input>
      <el-form-item-error v-if="!$v.form.password.required">Password is required</el-form-item-error>
      <el-form-item-error v-if="!$v.form.password.minLength">Password must have at least 6 characters</el-form-item-error>
    </el-form-item>
    <el-form-item label="Confirm Password" prop="confirmPassword">
      <el-input type="password" v-model.trim="form.confirmPassword"></el-input>
      <el-form-item-error v-if="!$v.form.confirmPassword.required">Confirm Password is required</el-form-item-error>
      <el-form-item-error v-if="form.password !== form.confirmPassword">Passwords do not match</el-form-item-error>
    </el-form-item>
    <el-form-item label="Gender" prop="gender">
      <el-radio-group v-model="form.gender">
        <el-radio label="male">Male</el-radio>
        <el-radio label="female">Female</el-radio>
      </el-radio-group>
      <el-form-item-error v-if="!$v.form.gender.required">Gender is required</el-form-item-error>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">Register</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import axios from 'axios'
import { required, minLength, email } from 'vuelidate/lib/validators'

export default {
  validations: {
    form: {
      username: { required, minLength: minLength(6), nameAvailable: value => checkNameAvailability(value) },
      email: { required, email },
      password: { required, minLength: minLength(6) },
      confirmPassword: { required },
      gender: { required }
    }
  },

  data() {
    return {
      form: {
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
        gender: ''
      }
    }
  },

  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          axios.post('/api/register', this.form)
            .then(() => {
              this.$message.success('Registration succeeded')
              this.$router.replace('/login')
            })
            .catch(error => {
              this.$message.error('Registration failed')
              console.log(error)
            })
        }
      })
    }
  }
}

function checkNameAvailability(value) {
  return axios.get('/api/check_name', { params: { name: value } })
    .then(response => {
      return response.data.available
    })
    .catch(error => {
      console.log(error)
      return false
    })
}
</script>

在上面的示例中，我们使用了一个名为 nameAvailable 的验证规则来检查用户名是否已经存在。在模板中可以使用 $v.form.xxx.$pending 来判断异步验证状态。在提交表单时，我们使用 this.$refs.form.validate 方法来进行表单验证，并在验证通过后发送注册请求。如果注册成功，则跳转到登录页面。