vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据，动态校验规则】

<template>
  <a-form :model="formState" @finish="onFinish" @finishFailed="onFinishFailed">
    <a-form-item label="用户名" name="username">
      <a-input v-model:value="formState.username" />
    </a-form-item>
    <a-form-item label="密码" name="password">
      <a-input v-model:value="formState.password" type="password" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
</template>
 
<script setup>
import { reactive } from 'vue';
import { message } from 'ant-design-vue';
 
const formState = reactive({
  username: '',
  password: ''
});
 
const onFinish = (values) => {
  console.log('提交的数据:', values);
  message.success('提交成功！');
};
 
const onFinishFailed = (errorInfo) => {
  console.log('提交失败:', errorInfo);
  message.error('提交失败，请检查输入！');
};
</script>

这段代码使用了Vue 3和Ant Design Vue库中的Form和Input组件来创建一个表单，并通过v-model进行了双向绑定。用户输入的数据会实时反映在formState对象中，并且当点击提交按钮时，会触发表单的finish事件，进行数据验证和处理。如果验证失败，会触发finishFailed事件，并给出相应的错误信息。