Ant Design Vue 中如何实现表单验证与提示信息

本示例演示了如何在Ant Design Vue框架中实现表单验证，包括字段必填、长度限制等常见验证需求，并在验证失败时显示相应的提示信息。

<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-form-item
      label="用户名"
      :validateStatus="form.getFieldError('username') ? 'error' : ''"
      :help="form.getFieldError('username') ? form.getFieldError('username').join(', ') : ''"
    >
      <a-input v-decorator="['username', { rules: [{ required: true, message: '请输入用户名' }] }]" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  methods: {
    handleSubmit() {
      this.form.validateFields((errors, values) => {
        if (!errors) {
          console.log('提交的表单数据：', values);
        }
      });
    },
  },
};
</script>

<style scoped>
/* 样式可以根据实际项目需求进行自定义 */
</style>

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com