-
先展示修改后可校验的完整 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
相关推荐
faimi19 分钟前
🚀程序员必收藏!最全Git命令手册:解决90%团队协作难题coooliang1 小时前
【鸿蒙 NEXT】V1迁移V2状态管理程序员码歌1 小时前
零代码AI编程实战-热搜从0到1技术方案kk不中嘞2 小时前
浅谈前端框架服务端技术栈2 小时前
历时 1 个多月,我的第一个微信小程序「图片转 Excel」终于上线了!一个很老的小萌新2 小时前
json 解析 [{“id“:1,“name“:“apple“},{“id“:2,“name“:“banana“}]yanlele2 小时前
前端面试第 78 期 - 2025.09.07 更新 Nginx 专题面试总结(12 道题)影子信息2 小时前
el-tree 点击父节点无效,只能选中子节点拜无忧2 小时前
完美圆角,渐变边框,兼容chrome 60,两层背景的视觉差徐小夕3 小时前
用Vue3写了一款协同文档编辑器,效果简直牛!