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

May21☀️2024-11-29 9:47

先展示修改后可校验的完整 demo

html 复制代码

<template>
  <div class="rules-container">
    <a-form-model
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="Activity name" prop="name">
        <a-input v-model="formState.name" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">Create</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
export default {
  name: 'Test',
  data() {
    return {
      formState: {
        name: '',
      },
      rules: {
        name: [
          { required: true, message: 'Please input Activity name', trigger: 'blur' }
        ]
      },
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
    }
  },
  methods: {
    onSubmit() {
      this.$refs.formRef.validate(valid => {
        if(valid) {
          console.log('values');
        } else{
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

官网：校验生效前提
重点