【Ant Design Vue3】表单回显有数据直接提交校验不通过，修改后通过怎么回事

Question

打开数据回显表单，不更改直接提交，校验不通过（本来就有数据啊，怎么还不通过？）

不通过的字段重新输入下就好了，为什么？

直接保存提交不通过的数据

重新输入通过的数据

Answer 1

以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳：

---

问题分析与解决方案

问题分析

1. 数据回显问题：当用户打开数据回显表单时，表单中的数据可能没有正确地与表单字段绑定，或者数据格式与校验规则不匹配。
2. 校验时机问题：表单校验可能没有在数据回显后立即触发，导致校验结果不准确。
3. 校验规则问题：表单的校验规则可能设置得过于严格或不正确，导致即使数据看起来正确也无法通过校验。

解决方案

1. 确保数据回显正确：检查数据回显的逻辑，确保数据格式与表单字段的预期格式一致。
2. 触发表单校验：在数据回显后，手动触发一次表单校验，可以使用form.validateFields方法。
3. 调整校验规则：根据实际需求调整rules属性，确保校验规则既合理又符合业务逻辑。

示例代码

下面是一个使用Ant Design Vue3实现的表单示例，包含用户名和密码两个字段，并在数据回显后触发校验。

<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-form-item
      label="Username"
      has-feedback
      :rules="[
        { required: true, message: 'Please input your username!' },
        { min: 3, message: 'Username must be at least 3 characters long!' }
      ]"
    >
      <a-input v-model="formState.username" />
    </a-form-item>
    <a-form-item
      label="Password"
      has-feedback
      :rules="[
        { required: true, message: 'Please input your password!' },
        { min: 6, message: 'Password must be at least 6 characters long!' }
      ]"
    >
      <a-input type="password" v-model="formState.password" />
    </a-form-item>
    <a-button type="primary" html-type="submit">Submit</a-button>
  </a-form>
</template>

<script>
import { Form, Input, Button } from 'ant-design-vue';

export default {
  components: {
    'a-form': Form,
    'a-form-item': Form.Item,
    'a-input': Input,
    'a-button': Button
  },
  data() {
    return {
      formState: {
        username: 'initialValue', // 假设这是从后端获取的初始值
        password: 'initialValue'
      },
      form: this.$form.createForm(this, { name: 'normal_login' })
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields()
        .then(values => {
          console.log('Received values of form: ', values);
          alert('Submitted!');
        })
        .catch(info => {
          console.log('Failed:', info);
        });
    },
    validateForm() {
      this.form.validateFields();
    }
  },
  mounted() {
    // 假设在数据回显后需要重新校验
    this.validateForm();
  }
};
</script>

示例输入与输出

示例输入：

• 用户名：initialValue
• 密码：initialValue

示例输出：

• 如果用户名和密码不符合校验规则（例如长度不足），则会显示相应的错误提示。
• 如果数据符合校验规则，表单将提交成功，并显示“Submitted!”。

注意事项

• 确保formState中的数据与后端返回的数据一致。
• 在mounted生命周期钩子中调用validateForm方法来确保数据回显后表单校验能够正确触发。
• 根据实际业务需求调整rules属性中的校验规则。

环境版本信息

• Vue.js: 3.x
• Ant Design Vue: 3.x

通过上述示例代码和步骤，用户可以解决在使用Ant Design Vue3进行表单校验时遇到的问题。如果问题仍然存在，可能需要进一步检查数据回显的逻辑或与后端的接口数据格式。