当前位置: 首页 > article >正文

elment-plus的表单的其中一项通过了验证再去走别的函数怎么写,不是全部内容通过验证

<template>

<el-form ref="formRef" :model="formData" :rules="formRules">

    <el-form-item label="身份证号" prop="idCard">

         <el-input v-model="formData.idCard" @blur="getDetail()" ></el-input>

   </el-form-item>

   <el-form-item label="年龄" prop="age">

        <el-input v-model.number="formData.age"></el-input>

   </el-form-item>

</el-form>

</template>

比如我想验证了身份证号符合规范之后才去执行某个函数。执行getDetail的时候必须是验证了身份证号的该怎么做呢?

import { ref } from 'vue';

// 获取表单实例的 ref

const formRef = ref(null);

// 表单数据对象

const formData = ref({ idCard: '', age: null });

const formRules= reactive({idCard: [{required: true,  validator: checkIdCard}],age:[{required:true,message:'请输入年龄'}]
});
//身份证的校验
const checkIdCard=(rule: any, value: any, callback: any)=>{const regexp=/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i;if(value===""||value===undefined) callback("请输入身份证号");
if (!regexp.test(value)) {callback(new Error("请输入正确的身份证号"));
} else {return callback()
}
}
//根据身份证查询评估结果
const getDetail = async () => {ruleFormRef.value!.validateField('idCard', async(valid) => {if (valid) {// 验证通过,执行其他函数

          } else { //验证未通过  

        }

相关文章:

elment-plus的表单的其中一项通过了验证再去走别的函数怎么写,不是全部内容通过验证

<template> <el-form ref"formRef" :model"formData" :rules"formRules"> <el-form-item label"身份证号" prop"idCard"> <el-input v-model"formData.idCard" blur"getDetail()"…...

蓝桥杯试题:归并排序

一、问题描述 在一个神秘的岛屿上&#xff0c;有一支探险队发现了一批宝藏&#xff0c;这批宝藏是以整数数组的形式存在的。每个宝藏上都标有一个数字&#xff0c;代表了其珍贵程度。然而&#xff0c;由于某种神奇的力量&#xff0c;这批宝藏的顺序被打乱了&#xff0c;探险队…...

Untiy3d 铰链、弹簧,特殊的物理关节

&#xff08;一&#xff09;铰链组件 1.创建一个立方体和角色胶囊 2.给角色胶囊挂在控制脚本和刚体 using System.Collections; using System.Collections.Generic; using UnityEngine;public class plyer : MonoBehaviour {// Start is called once before the first execut…...

Visual Studio 进行单元测试【入门】

摘要&#xff1a;在软件开发中&#xff0c;单元测试是一种重要的实践&#xff0c;通过验证代码的正确性&#xff0c;帮助开发者提高代码质量。本文将介绍如何在VisualStudio中进行单元测试&#xff0c;包括创建测试项目、编写测试代码、运行测试以及查看结果。 1. 什么是单元测…...

Leetcode - 周赛435

目录 一、3442. 奇偶频次间的最大差值 I二、3443. K 次修改后的最大曼哈顿距离三、3444. 使数组包含目标值倍数的最少增量四、3445. 奇偶频次间的最大差值 II 一、3442. 奇偶频次间的最大差值 I 题目链接 本题使用数组统计字符串 s s s 中每个字符的出现次数&#xff0c;然后…...

CentOS本机配置为时间源

CentOS本机配置为时间源 安装chrony&#xff0c;默认已安装修改配置文件 /etc/chrony.conf客户端配置 安装chrony&#xff0c;默认已安装 yum -y install chrony修改配置文件 /etc/chrony.conf # cat /etc/chrony.conf | grep -Ev "^$|#" server ceph00 iburst dri…...

算法之 数论

文章目录 质数判断质数3115.质数的最大距离 质数筛选204.计数质数2761.和等于目标值的质数对 2521.数组乘积中的不同质因数数目 质数 质数的定义&#xff1a;除了本身和1&#xff0c;不能被其他小于它的数整除&#xff0c;最小的质数是 2 求解质数的几种方法 法1&#xff0c;根…...

Android车机DIY开发之软件篇(十二) AOSP12下载编译

Android车机DIY开发之软件篇(十二) AOSP12下载编译 sudo apt-get update sudo apt-get install git-core gnupg flex bison gperf build-essential zip curl zlib1g-dev gcc-multilib gmultilib libc6-dev-i386 lib32ncurses5-dev libx11-dev lib32z-dev ccache libgl1-mesa-…...

docker 导出导入

1第一步骤docker save docker save -o database-export-4.1.0.tar database-export-4.1.0.jar:latest 2检查镜像ls -l, 注意&#xff1a;文件可能没有其他文件导出权限&#xff1a;chmod 644 database-export-4.1.0.tar 3在新的服务器导入&#xff1a; docker load -i databa…...

OSPF高级特性(3):安全特效

引言 OSPF的基础我们已经结束学习了&#xff0c;接下来我们继续学习OSPF的高级特性。为了方便大家阅读&#xff0c;我会将高级特性的几篇链接放在末尾&#xff0c;所有链接都是站内的&#xff0c;大家点击即可阅读&#xff1a; OSPF基础&#xff08;1&#xff09;&#xff1a;工…...

基于SSM的农产品供销小程序+LW示例参考

1.项目介绍 系统角色&#xff1a;管理员、农户功能模块&#xff1a;用户管理、农户管理、产品分类管理、农产品管理、咨询管理、订单管理、收藏管理、购物车、充值、下单等技术选型&#xff1a;SSM&#xff0c;Vue&#xff08;后端管理web&#xff09;&#xff0c;uniapp等测试…...

自然语言处理NLP入门 -- 第二节预处理文本数据

在自然语言处理&#xff08;NLP&#xff09;中&#xff0c;数据的质量直接影响模型的表现。文本预处理的目标是清理和标准化文本数据&#xff0c;使其适合机器学习或深度学习模型处理。本章介绍几种常见的文本预处理方法&#xff0c;并通过 Python 代码进行示例。 2.1 文本清理…...

android launcher拖动图标释放错位

由于为了设备流畅把所有动画效果设置为0.5&#xff0c;不设置为0是因为锁屏在开机时会有闪黑屏的现象。在此背景下&#xff0c;测试发现在拖动桌面图标时&#xff0c;在图标动画过程中错位时释放图标&#xff0c;则图标会留在错位的位置&#xff0c;不会自动对齐。 原因就是动…...

小结:OSPF的网络类型,LSA

OSPF&#xff08;Open Shortest Path First&#xff09;是一个基于链路状态的内部网关协议&#xff08;IGP&#xff09;。以下是对OSPF网络类型、LSA类型、序列号与Age作用&#xff0c;以及相关配置指令的详细讲解。 一、OSPF的网络类型 OSPF支持多种网络类型&#xff0c;不同…...

Unity URP的2D光照简介

官网工程&#xff0c;包括2d光照&#xff0c;动画&#xff0c;动效介绍&#xff1a; https://unity.com/cn/blog/games/happy-harvest-demo-latest-2d-techniques https://docs.unity3d.com/6000.0/Documentation/Manual/urp/Lights-2D-intro.html 人物脸部光照细节和脚上的阴影…...

笔试题笔记#3

1 一道bfs&#xff0c;唯一不同的是要对单链表中后继节点的编号排序 #include<bits/stdc.h> using namespace std;const int N10000;vector<int> headofNode[N]; int n,m; int d; bool st[N]; int parent[N]; vector<int> ans;void PrintAns(int i){//cout…...

Jenkins 部署 之 Mac 一

Jenkins 部署 之 Mac 一 一.Jenkins 部署依赖 JDK 环境 查看 Mac JDK 环境&#xff0c;如果没有安装&#xff0c;先安装 打开终端输入命令:java -version Mac安装配置 JDK 二. 检查 HomeBrew 安装 检查 HomeBrew 是否安装&#xff0c;终端输入命令:brew -v Mac安装HomeB…...

iOS Swift算法之KDF2

后端用Java开发的&#xff0c;用到了org.bouncycastle.crypto.generators.KDF2BytesGenerator&#xff0c;一开始在网上各种搜&#xff0c;没找到相关的接口或第三方库&#xff0c;白白浪费了几天时间&#xff0c;后面才想到照着Java代码自己实现&#xff0c;于是乎参考BaseKDF…...

钉钉位置偏移解决,钉钉虚拟定位打卡

虚拟定位打卡工具 一&#xff0c;介绍免费获取工具 一&#xff0c;介绍 提到上班打卡&#xff0c;职场人的内心戏估计能拍成一部连续剧。打卡&#xff0c;这俩字仿佛自带“紧箍咒”&#xff0c;让无数打工人又爱又恨。想象一下&#xff0c;你气喘吁吁地冲进办公室&#xff0c;…...

windows基于cpu安装pytorch运行faster-whisper-large-v3实现语音转文字

1.创建虚拟环境 conda create -n faster-whisper python3.10 conda activate faster-whisper 2.安装cpu版本的pytorch pip3 install torch torchvision torchaudio -i https://pypi.tuna.tsinghua.edu.cn/simple 3.验证pytorch安装结果 (faster-whisper) H:\big-model\faste…...

写一个鼠标拖尾特效

思路和逻辑 要实现鼠标拖尾特效&#xff0c;我们需要&#xff1a; 监听鼠标移动事件&#xff0c;获取鼠标的当前位置。在每次鼠标移动时&#xff0c;绘制一个小圆点或其他形状在鼠标的当前位置。将所有绘制的圆点连接起来&#xff0c;形成一条“尾巴”。使用动画效果让尾巴看…...

《深度LSTM vs 普通LSTM:训练与效果的深度剖析》

在深度学习领域&#xff0c;长短期记忆网络&#xff08;LSTM&#xff09;以其出色的处理序列数据能力而备受瞩目。而深度LSTM作为LSTM的扩展形式&#xff0c;与普通LSTM在训练和效果上存在着一些显著的不同。 训练方面 参数数量与计算量&#xff1a;普通LSTM通常只有一层或较少…...

【使用 rimraf 闪电删除 node_modules 目录】

使用 rimraf 闪电删除 node_modules 目录 你是否还在为删除项目下庞大的 node_modules 苦苦挣扎。删除失败&#xff0c;权限不足&#xff0c;响应半天后&#xff0c;响应半天后的失败。快来试试 rimraf 闪电般删除吧&#xff01; 为什么需要专门工具删除 node_modules&#xff…...

使用DeepSeek和Kimi快速自动生成PPT

目录 步骤1&#xff1a;在DeepSeek中生成要制作的PPT主要大纲内容。 &#xff08;1&#xff09;在DeepSeek网页端生成 &#xff08;2&#xff09;在本地部署DeepSeek后&#xff0c;使用chatBox生成PPT内容 步骤2&#xff1a;将DeepSeek成的PPT内容复制到Kimi中 步骤3&…...

Webpack包

黑马程序员视频地址&#xff1a; Node.js与Webpack-16.Webpack简介以及体验 前言&#xff1a; 本篇中部分标题后标有数字&#xff0c;代表学习顺序 &#xff0c;同时也可以作为使用顺序参考 webpack包 基础认识 初步使用 下载webpack包和webpack-cli包 注意点&#xff1a; 1…...

鸿蒙HarmonyOS NEXT开发:横竖屏切换开发实践

文章目录 一、概述二、窗口旋转说明1、配置module.json5的orientation字段2、调用窗口的setPreferredOrientation方法 四、性能优化1、使用自定义组件冻结2、对图片使用autoResize3、排查一些耗时操作 四、常见场景示例1、视频类应用横竖屏开发2、游戏类应用横屏开发 五、其他常…...

flink判断两个事件之间有没有超时(不使用CEP)

1.为啥不使用cep呢&#xff0c;cep的超时时间设置不好配置化&#xff0c;无法满足扩展要求 2.超时怎么界定。A事件发生后&#xff0c;过了N时间&#xff0c;还没有收到B事件&#xff0c;算超时。 代码如下&#xff1a; import com.alibaba.fastjson.JSONObject; import lombo…...

数学建模与MATLAB实现:稳定状态模型与资源管理策略

引言 在实际问题中&#xff0c;动态过程的瞬时性态往往难以直接分析&#xff0c;而研究其稳定状态的特征则更具实际意义。本章介绍如何通过微分方程稳定性理论&#xff0c;结合再生资源管理、种群竞争等案例&#xff0c;分析系统的平衡点及稳定性&#xff0c;为实际决策提供数…...

爬虫代码中如何设置请求间隔?

在爬虫代码中设置请求间隔是确保爬虫稳定运行并避免对目标服务器造成过大压力的重要措施。合理设置请求间隔可以有效降低被目标网站封禁IP的风险&#xff0c;同时也有助于爬虫程序的稳定运行。以下是几种常见的方法来设置请求间隔&#xff1a; 一、使用time.sleep() time.sle…...

基于Spring Security 6的OAuth2 系列之十五 - 高级特性--客户端认证方式

之所以想写这一系列&#xff0c;是因为之前工作过程中使用Spring Security OAuth2搭建了网关和授权服务器&#xff0c;但当时基于spring-boot 2.3.x&#xff0c;其默认的Spring Security是5.3.x。之后新项目升级到了spring-boot 3.3.0&#xff0c;结果一看Spring Security也升级…...