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

  • 先展示修改后可校验的完整 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>
  • 官网:校验生效前提

  • 重点

相关推荐
摇滚侠1 天前
Spring Boot 3零基础教程,WEB 开发 默认的自动配置,笔记25
前端·spring boot·笔记
Cherry Zack1 天前
Vue Router 路由管理完全指南:从入门到精通前言
前端·javascript·vue.js
亮子AI1 天前
【npm】npm install 产生软件包冲突怎么办?(详细步骤)
前端·npm·node.js
汪汪大队u1 天前
为什么 filter-policy 仅对 ASBR 的出方向生效,且即使在该生效场景下,被过滤的路由在协议内部(如协议数据库)依然存在,没有被彻底移除?
服务器·前端·网络
慧一居士1 天前
vue.config.js 文件功能介绍,使用说明,对应完整示例演示
前端·vue.js
颜酱1 天前
用导游的例子来理解 Visitor 模式,实现AST 转换
前端·javascript·算法
木易 士心1 天前
Nginx 基本使用和高级用法详解
运维·javascript·nginx
蒙特卡洛的随机游走1 天前
Spark的宽依赖与窄依赖
大数据·前端·spark
共享家95271 天前
QT-常用控件(多元素控件)
开发语言·前端·qt
幸运小圣1 天前
Iterator迭代器 【ES6】
开发语言·javascript·es6