ant design vue做表单验证及form表单外验证、父子嵌套多个表单校验

embedded/2024/12/23 8:26:43/

1、form表单验证(若有时遇到输入框有值但是还是触发验证规则了,请检查form表单绑定正确吗、校验规则正确吗、表格数据字段名正确吗)

<a-form:model="formState":label-col="{ span: 8 }":wrapper-col="{ span: 16 }":rules="rules"ref="form"
><a-row :gutter="[0, 24]"><a-col :span="8"><a-form-item name="faqiren" label="发起人" labelAlign="right"><a-input v-model:value="formState.faqiren" disabled /></a-form-item></a-col></a-row></a-form>
<a-button type="primary"  html-type="submit" @click="SubmitReview()">
提交审核</a-button>// 表单数据对象const formState = ref({faqiren: '',});const rules = {faqiren: [{required: true,trigger: 'change',},]};

2、form表单外验证


const form = ref();
const SubmitReview = () => {form.value.validateFields().then((values) => {console.log('验证通过,表单数据为:', values);}).catch((errorInfo) => {console.log('验证失败,错误信息为:', errorInfo);});
};

3、父子嵌套多个表单校验(父组件中有一个form表单,子组件中也有一个form表单,需求是在父组件中统一处理父组件和子组件的2个表单的校验)

 父组件

//父组件
<a-form:model="formState":label-col="{ span: 8 }":wrapper-col="{ span: 16 }":rules="rules"ref="form"
><a-row :gutter="[0, 24]"><a-col :span="8"><a-form-item name="faqiren" label="发起人" labelAlign="right"><a-input v-model:value="formState.faqiren" disabled /></a-form-item></a-col></a-row></a-form>
//子组件
<zhuanchu ref="form1" v-if="formState.biandongleixing == 'zhuanchu'"></zhuanchu><a-button type="primary"  html-type="submit" @click="SubmitReview()">
提交审核</a-button>// 表单数据对象const formState = ref({faqiren: '',});const rules = {faqiren: [{required: true,trigger: 'change',},]};const form = ref();
const SubmitReview = () => {
//父组件校验form.value.validateFields().then((values) => {console.log('验证通过,表单数据为:', values);}).catch((errorInfo) => {console.log('验证失败,错误信息为:', errorInfo);});
//子组件校验form1.value.getDom().validateFields().then((values) => {console.log('验证通过,表单数据为:', values);}).catch((errorInfo) => {console.log('验证失败,错误信息为:', errorInfo);});
};

子组件 

//子组件
<a-form:model="formState":label-col="{ span: 8 }":wrapper-col="{ span: 16 }":rules="rules"ref="form2"
><a-row :gutter="[0, 24]"><a-col :span="8"><a-form-item name="nianling" label="年龄" labelAlign="right"><a-input v-model:value="formState.nianling" disabled /></a-form-item></a-col></a-row></a-form>// 表单数据对象const formState = ref({nianling: '',});const rules = {nianling: [{required: true,trigger: 'change',},]};const form2=ref()const getDom=()=>{return form2.value}defineExpose({getDom})


http://www.ppmy.cn/embedded/120166.html

相关文章

spring模块都有哪些

Spring 框架是一个庞大而灵活的生态系统&#xff0c;它包含了多个模块&#xff0c;每个模块都提供了特定的功能和服务。以下是一些主要的 Spring 模块&#xff1a; Spring Core&#xff1a; 核心容器&#xff0c;提供了 IoC&#xff08;控制反转&#xff09;和 DI&#xff08;…

强化学习-python案例

强化学习是一种机器学习方法&#xff0c;旨在通过与环境的交互来学习最优策略。它的核心概念是智能体&#xff08;agent&#xff09;在环境中采取动作&#xff0c;从而获得奖励或惩罚。智能体的目标是最大化长期奖励&#xff0c;通过试错的方式不断改进其决策策略。 在强化学习…

HAL+M4学习记录_2

一、Boot配置 内存地址是固定的&#xff0c;代码从0x0000 0000开始&#xff0c;而数据从0x2000 0000开始&#xff0c;F4支持三种不同的boot模式 复位芯片时&#xff0c;在SYSCLK的第4个上升沿BOOT引脚值被锁存&#xff0c;STM32F407通过此时BOOT[1:0]引脚值选择Boot模式 BOOT1…

Flet介绍:平替PyQt的好用跨平台Python UI框架

随着Python在各个领域的广泛应用&#xff0c;特别是在数据科学和Web开发领域&#xff0c;对于一个简单易用且功能强大的用户界面&#xff08;UI&#xff09;开发工具的需求日益增长。传统的Python GUI库如Tkinter、PyQt虽然功能强大&#xff0c;但在易用性和现代感方面略显不足…

学习单片机编程和硬件设计步骤

学习单片机编程和硬件设计可以分为几个步骤&#xff1a; 理解基本概念&#xff1a;首先需要了解单片机的基本概念、硬件结构和工作原理 。 选择开发平台&#xff1a;选择一个合适的单片机系列作为起点&#xff0c;如Arduino、ESP8266/ESP32或STM32系列 。 准备工具和环境&…

基于QT的C++中小项目软件开发架构源码

描述 基于QT信号槽机制实现类之间的交互调用通信&#xff0c;适用于使用不同枚举作为消息交互的类型场景&#xff0c;支持附带任意参数&#xff0c;代码使用方式参考前一篇文章 特性 代码简洁&#xff0c;不超过100行仅需包含一个头文件Communicator.h&#xff0c;需要通信的…

zico2打靶记录

一、环境搭建 下载地址&#xff1a;https://download.vulnhub.com/zico/zico2.ova 直接双击下载的.ova文件即可在VMware中打开 设置好保存路径后在虚拟机的设置中删除仅主机这个网卡 然后启动靶机 二、信息收集 扫描靶机ip arp-scan -l 扫描一下开放的端口 nmap -p- -sV…

生产环境升级mysql流程及配置主从服务

之前写到过mysql升级8.4的文章, 因此不再介绍mysql的安装过程 避免服务器安装多个mysql引起冲突的安装方法_安装两个mysql会冲突吗-CSDN博客 生产环境升级mysql8.4.x流程 安装mysql 参考之前文章: 避免服务器安装多个mysql引起冲突的安装方法_安装两个mysql会冲突吗-CSDN博客…