-
先展示修改后可校验的完整 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 小时前
Flutter---音效模式选择器TLucas1 小时前
Layui连线题编辑器组件(ConnectQuestion)艾小码1 小时前
告别页面呆板!这5个DOM操作技巧让你的网站活起来正在学习前端的---小方同学3 小时前
vue-easy-tree树状结构毕业设计制作和分享4 小时前
springboot150基于springboot的贸易行业crm系统键盘不能没有CV键7 小时前
【图片处理】✈️HTML转图片字体异常处理yantuguiguziPGJ7 小时前
WPF 联合 Web 开发调试流程梳理(基于 Microsoft.Web.WebView2)大飞记Python8 小时前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)tsumikistep8 小时前
【前端】前端运行环境的结构你的人类朋友9 小时前
【Node】认识multer库