vue form表单接口校验

Vue Form组件中的接口校验通常通过Vuex ORM或axios等库配合Vue的自定义验证规则来实现。主要有以下几个步骤：

1. 安装依赖：首先安装`vue-router`, `axios`以及状态管理库如Vuex。

npm install axios vuex

2. 设置数据状态：在Vuex store中定义用户输入的状态，并设置初始值。

import { createStore } from 'vuex';
const state = {
  formData: {},
};
const mutations = {
  // 更新表单数据的方法
  updateFormData(state, data) {
    state.formData = data;
  },
};

const actions = {
  // 发送请求并更新数据的方法
  submitForm({ commit }, payload) {
    axios.post('/api/submit', payload)
      .then(response => {
        commit('updateFormData', response.data);
      })
      .catch(error => {
        // 处理错误
      });
  },
};

export default createStore({
  state,
  mutations,
  actions,
});

3. 在模板中使用form组件：

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input v-model="formData.fieldName" :rules="fieldRules"/>
      <!-- 其他字段 -->
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['formData']), // 获取store中的表单数据
  },
  methods: {
    ...mapActions(['submitForm']), // 获取store中的提交方法
    fieldRules: {
      // 自定义验证规则，例如 required, pattern 等
      required: v => !!v || '请输入内容',
      // 如果需要验证与服务器交互的数据格式，可以添加axios的验证规则
      validateServerFormat: v => axios.post('/api/validate', { fieldData: v }).then(response => response.data.valid),
    },
    submitForm() {
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          this.submitForm(); // 提交表单，如果验证成功
        }
      });
    },
  },
  ref: 'myForm', // 使用ref以便在methods中获取表单实例进行直接操作
};
</script>

4. 验证器：`$refs.myForm.validate`会触发表单的内置验证，你可以结合自定义的验证规则来判断是否允许提交。如果所有验证都通过，才发起接口请求。