Ant Design Vue 表单验证实例与技术解答

本示例演示如何使用 Ant Design Vue 中的表单验证功能，通过自定义规则实现特定需求，并提供常见问题的技术解答。

// 引入Ant Design Vue组件
import { Form, Input, Button } from 'ant-design-vue';

export default {
  components: {
    'a-form': Form,
    'a-input': Input,
    'a-button': Button,
  },
  data() {
    return {
      // 表单数据
      formData: {
        username: '',
        password: '',
      },
      // 自定义规则
      customRules: {
        // 用户名规则：非空且长度大于等于3
        username: [
          { required: true, message: '请输入用户名' },
          { min: 3, message: '用户名长度至少为3个字符' },
        ],
        // 密码规则：非空且长度大于等于6
        password: [
          { required: true, message: '请输入密码' },
          { min: 6, message: '密码长度至少为6个字符' },
        ],
      },
    };
  },
  methods: {
    // 提交表单触发的方法
    handleSubmit() {
      // 在此处处理表单提交逻辑
      console.log('提交的表单数据：', this.formData);
    },
  },
  template: `
    <a-form :model="formData" :rules="customRules" @submit="handleSubmit">
      <a-form-item label="用户名" prop="username">
        <a-input v-model="formData.username" />
      </a-form-item>
      <a-form-item label="密码" prop="password">
        <a-input type="password" v-model="formData.password" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">提交</a-button>
      </a-form-item>
    </a-form>
  `,
};

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