【Ant Design Vue】表单校验 rules 不起作用

• 先展示修改后可校验的完备 demo
  1. <template>
  2.   <div class="rules-container">
  3.     <a-form-model
  4.       ref="formRef"
  5.       :model="formState"
  6.       :rules="rules"
  7.       :label-col="labelCol"
  8.       :wrapper-col="wrapperCol"
  9.     >
  10.       <a-form-model-item label="Activity name" prop="name">
  11.         <a-input v-model="formState.name" />
  12.       </a-form-model-item>
  13.       <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
  14.         <a-button type="primary" @click="onSubmit">Create</a-button>
  15.       </a-form-model-item>
  16.     </a-form-model>
  17.   </div>
  18. </template>
  19. <script>
  20. export default {
  21.   name: 'Test',
  22.   data() {
  23.     return {
  24.       formState: {
  25.         name: '',
  26.       },
  27.       rules: {
  28.         name: [
  29.           { required: true, message: 'Please input Activity name', trigger: 'blur' }
  30.         ]
  31.       },
  32.       labelCol: {
  33.         span: 4,
  34.       },
  35.       wrapperCol: {
  36.         span: 14,
  37.       },
  38.     }
  39.   },
  40.   methods: {
  41.     onSubmit() {
  42.       this.$refs.formRef.validate(valid => {
  43.         if(valid) {
  44.           console.log('values');
  45.         } else{
  46.           console.log('error submit!!')
  47.           return false
  48.         }
  49.       })
  50.     }
  51.   }
  52. }
  53. </script>

  复制代码
• 官网：校验收效条件
  
  
  
  
• 重点