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

Vue form表单验证

el-form 标签添加 ref、rules

 <el-form ref="form" :inline="true" :model="form" :rules="rules">

el-form-item 添加prop

 <el-form-item label="姓名" prop="name"><el-input placeholder="请输入姓名" v-model="form.name"></el-input></el-form-item>

提交按钮传递form对象

 <el-buttontype="primary":disabled="false"@click="submit('form')">提交</el-button>

data编写验证规则, 也可以使用 validator 自定义规则函数

    // 座机及手机号const checkPhone = (rule, value, callback) => {const phone = /^1[3|4|5|7|8][0-9]\d{8}$/const phone1 = /^(\d{3,4}-)?\d{7,8}$/if (value && (!phone.test(value) && !phone1.test(value))) {callback(new Error('请输入正确的电话号码'))} else {callback()}},data() {return {rules: {Phone: [{ required: false, validator: checkPhone, trigger: 'blur' },{type: 'string',required: true,message: '请输入电话号码',trigger: 'blur'}],address: [{type: "string",  // 输入类型required: true,  // 是否必填项message: "请输入住址",trigger: "blur",},],},}},

提交请求前验证- - - 收工

    submit(form) {const set = this.$refsset[form].validate((valid) => {if (valid) {axios......}})},

附加 : 同样我们也可以在 el-form-item 标签上添加验证规则,
需要区别的是如果有额外的自定义规则,不同于上面对手机号码的验证方式,
该验证规则编写在method方法中

<el-form-item label="证件号码" prop="regApplyCardNum":rules="[ {validator:validateIdCard,trigger:'blur'},{ type: 'string', required: true, message: '请输入证件号码', trigger: 'blur'}]"><FormInput v-model="form.regApplyCardNum" placeholder="请输入证件号码" />
</el-form-item>method:{validateIdCard(rule, value, callback) {if (this.form.regNationality === '1' && this.form.regApplyCardType === '1') {if (!/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/.test(value)) {callback(new Error('请输入正确的中国居民身份证号'))}}if (this.form.regNationality === '1' && this.form.regApplyCardType === '2') {if (!/^[HMhm]{1}([0-9]{10}|[0-9]{8})$/.test(value) || !/^[0-9]{8}$/.test(value)) {callback(new Error('请输入正确的港澳台居住证号'))}}if (this.form.regNationality === '1' && this.form.regApplyCardType === '2') {if (!/^[a-zA-Z]{5,17}$/.test(value) || !/^[a-zA-Z0-9]{5,17}$/.test(value)) {callback(new Error('请输入正确的护照号码'))}}callback()},
}

一小部分正则:

/^[\u4e00-\u9fa5]+$/gi   // 只允许输入汉字/^[A-Za-z_\-]+$/ig			// 只允许输入大小写字母下划线/[a-zA-Z0-9]$/			// 只允许输入大小写字母和数字

相关文章:

Vue form表单验证

el-form 标签添加 ref、rules <el-form ref"form" :inline"true" :model"form" :rules"rules">el-form-item 添加prop <el-form-item label"姓名" prop"name"><el-input placeholder"请输入姓…...

vue.extend解决vue页面转构造函数暴露js供全局使用

用途: 解决在一些微前端项目中, B工程使用A工程的弹窗代码 // MaterialListPlugin.js文件, 在项目入口引入 // eg: 在main.js中添加一行 import /components/MaterialListPlugin.jsimport Vue from vue import MaterialListPlugin from /components/MaterialListPlugin.vue //…...

Java中如何处理异常?

在Java中处理异常是确保软件健壮性和提高代码质量的重要手段。以下是Java异常处理的一些关键点和最佳实践&#xff1a; 1&#xff1a;理解异常类型&#xff1a; Java中的异常分为检查异常&#xff08; checked exceptions&#xff09;和非检查异常&#xff08;un-checked exc…...

wordpress站群搭建3api代码生成和swagger使用

海鸥技术下午茶-wordpress站群搭建3api代码生成和swagger使用 目标:实现api编写和swagger使用 0.本次需要使用到的脚手架命令 生成 http server 代码 goctl api go -api all.api -dir ..生成swagger文档 goctl api plugin -plugin goctl-swagger"swagger -filename st…...

如何在使用 Qt 时打印到控制台

在开发过程中&#xff0c;打印变量值到控制台对于调试和监控非常重要。使用 Qt 和 C 开发时&#xff0c;有多种方法可以实现这一点。在本文中&#xff0c;我们将探索几种在 Qt 中打印到控制台的专业方法。 1. 使用 qDebug、qWarning、qCritical 和 qFatal Qt 提供了一些方便的…...

ffmpeg音视频开发从入门到精通——ffmpeg下载编译与安装

音视频领域学习ffmpeg的重要性 音视频领域中ffmpeg的广泛应用&#xff0c;包括直播、短视频、网络视频、实时互动和视频监控等领域。掌握FM和音视频技术可以获得更好的薪酬。 学习建议音视频学习建议与实战应用 音视频处理机制的学习&#xff0c;需要勤加练习&#xff0c;带…...

数据通信与网络(三)

物理层概述&#xff1a; 物理层是网络体系结构中的最低层 它既不是指连接计算机的具体物理设备&#xff0c;也不是指负责信号传输的具体物理介质&#xff0c; 而是指在连接开放系统的物理媒体上为上一层(指数据链路层)提供传送比特流的一个物理连接。 物理层的主要功能——为…...

盲盒小程序模式?有什么功能?

近些年&#xff0c;盲盒成为了热门的休闲娱乐消费方式&#xff0c;深深吸引着消费者的目光&#xff0c;行业更是持续上升发展&#xff0c;成为了具有巨大发展前景的行业之一。 随着市场的逐步发展&#xff0c;盲盒也开始向线上模式发展&#xff0c;以互联网为媒介&#xff0c;…...

【MySQL进阶之路 | 高级篇】InnoDB搜索引擎行格式

1. COMPACT行格式 COMPACT行格式是MySQL5.1的默认行格式.其结构示意图如下. 大体可以分为两部分. 记录的额外信息.这里面有包括变长字段长度列表&#xff0c;NULL值列表和记录头信息.记录的真实数据. (1).变长字段长度列表 MySQL支持一些变长的数据类型.比如VARCHAR(m), VA…...

大数据面试-Scala

谈谈scala的闭包、柯里化、高阶函数 如果一个函数&#xff0c;访问到了它的外部&#xff08;局部&#xff09;变量的值&#xff0c;那么这个函数和他所处的环境&#xff0c;称为闭包。 闭包在函数式编程中是一个重要的概念&#xff0c;广泛用于高阶函数、柯里化等技术中。 函数…...

76.最小覆盖子串

给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串&#xff0c;则返回空字符串 “” 。 注意&#xff1a; 对于 t 中重复字符&#xff0c;我们寻找的子字符串中该字符数量必须不少于 t 中该字符数量。 如果 s 中存…...

深度学习算法informer(时序预测)(三)(Encoder)

一、EncoderLayer架构如图&#xff08;不改变输入形状&#xff09; 二、ConvLayer架构如图&#xff08;输入形状中特征维度减半&#xff09; 三、Encoder整体 包括三部分 1. 多层EncoderLayer 2. 多层ConvLayer 3. 层归一化 代码如下 class AttentionLayer(nn.Module):de…...

HTML和CSS基础(一)

前言 HTML&#xff08;HyperText Markup Language&#xff09;是一种用于创建网页的标准标记语言。它由各种标签组成&#xff0c;这些标签定义了网页的结构和内容。HTML的早期形式诞生于1989年&#xff0c;由CERN的物理学家Tim Berners-Lee发明&#xff0c;最初用于在科学家之…...

低代码平台教你两步把SQL直接转换为RESTful API

文章目录 前言一、简介1. 项目亮点2. 技术栈3. 核心功能4. 数据库设计二、搭建教程1. 目录结构2. 下载2.1 下载2.2 上传2.3 解压3. 配置3.1 创建并切换数据库3.2 执行sql文件3.3 修改配置文件4. 启动/停止4.1 启动4.2 停止4.3 重启5. 浏览器访问三、配置教程1. 数据源配置1.1 创…...

JavaWeb阶段学习知识点(二)

登录校验和JWT令牌实现 JWT使用方式 创建一个springboot项目,pom.xml引入jwt依赖 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version></dependency><!-- 针对jdk17或…...

数据结构【二叉树】

前言 我们在前面学习了使用数组来实现二叉树&#xff0c;但是数组实现二叉树仅适用于完全二叉树&#xff08;非完全二叉树会有空间浪费&#xff09;&#xff0c;所以我们本章讲解的是链式二叉树&#xff0c;但由于学习二叉树的操作需要有一颗树&#xff0c;才能学习相关的基本…...

Vue P17-54

18、计算属性 示例&#xff1a;实现姓名的联动效果 可以用插值语法、method {{func()}} 这里必须有 &#xff08;&#xff09;表示返回值 在事件处理中&#xff0c;click“func1” 有没有无所谓 computed的计算属性和data中的属性都在vm中&#xff0c;但vm._data里只有后者…...

【自动驾驶】从零开始做自动驾驶小车

文章目录 自动驾驶小车系统、运动底盘的运动学分析和串口通信控制电机PID控制IMU初始化与陀螺仪零点漂移ubuntu基础教程ROS基础键盘控制巡线(雷达避障)雷达跟随视觉跟踪2D建图、2D导航3D建图、3D导航纯视觉建图导航语音控制KCF跟随自主建图建图与导航多机编队WEB浏览器显示摄像…...

一文让你彻底搞懂什么是VR、AR、AV、MR

随着科技的飞速发展&#xff0c;现实世界与虚拟世界的界限变得越来越模糊。各种与现实增强相关的技术如雨后春笋般涌现&#xff0c;令人眼花缭乱。本文将为你详细解读四种常见的现实增强技术&#xff1a;虚拟现实&#xff08;VR&#xff09;、增强现实&#xff08;AR&#xff0…...

Python设计模式 - 简单工厂模式

定义 简单工厂模式是一种创建型设计模式&#xff0c;它通过一个工厂类来创建对象&#xff0c;而不是通过客户端直接实例化对象。 结构 工厂类&#xff08;Factory&#xff09;&#xff1a;负责创建对象的实例。工厂类通常包含一个方法&#xff0c;根据输入参数的不同创建并返…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...