-
先展示修改后可校验的完整 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>
-
官网:校验生效前提
-
重点
【Ant Design Vue】表单校验 rules 不起作用
May21☀️2024-11-29 9:47
相关推荐
摇滚侠1 天前
Spring Boot 3零基础教程,WEB 开发 默认的自动配置,笔记25Cherry Zack1 天前
Vue Router 路由管理完全指南:从入门到精通前言亮子AI1 天前
【npm】npm install 产生软件包冲突怎么办?(详细步骤)汪汪大队u1 天前
为什么 filter-policy 仅对 ASBR 的出方向生效,且即使在该生效场景下,被过滤的路由在协议内部(如协议数据库)依然存在,没有被彻底移除?慧一居士1 天前
vue.config.js 文件功能介绍,使用说明,对应完整示例演示颜酱1 天前
用导游的例子来理解 Visitor 模式,实现AST 转换木易 士心1 天前
Nginx 基本使用和高级用法详解蒙特卡洛的随机游走1 天前
Spark的宽依赖与窄依赖共享家95271 天前
QT-常用控件(多元素控件)幸运小圣1 天前
Iterator迭代器 【ES6】