-
先展示修改后可校验的完整 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
相关推荐
excel21 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``可乐爱宅着21 小时前
全栈框架next.js入手指南你的人类朋友1 天前
什么是API签名?会豪1 天前
Electron-Vite (一)快速构建桌面应用中微子1 天前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)唐某人丶1 天前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”中微子1 天前
深入剖析 useState产生的 setState的完整执行流程遂心_1 天前
JavaScript 函数参数传递机制:一道经典面试题解析Gracemark1 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)小徐_23331 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!