Ant Design Vue 必输项验证：如何使用 required 属性

在 Ant Design Vue 中，可以使用 'required' 属性来标识输入框是否为必输项。例如：

<template>
  <a-form ref="form" :model="formData" :rules="formRules">
    <a-form-item label="Username" prop="username">
      <a-input v-model="formData.username" :rules="[{ required: true, message: 'Please input username' }]" ></a-input>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="handleSubmit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: ''
      },
      formRules: {
        username: [
          { required: true, message: 'Please input username' }
        ]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，提交表单
          console.log(this.formData);
        } else {
          // 表单验证不通过
        }
      });
    }
  }
}
</script>

在上面的例子中，输入框的 'required' 属性设置为 'true'，并且在 'rules' 属性中设置了相应的验证规则。当用户没有输入用户名时，会显示错误提示信息'Please input username'。