vue3 element plus 表单验证 数组嵌套对象格式验证 动态验证等

基本结构

在这里插入图片描述
model 表单数据对象
rules 验证对象
prop model 的键名

<template><el-form ref="ruleFormRef" :model="ruleForm" :rules="rules"><el-form-item label="手机号" prop="mobile"><el-input v-model="ruleForm.mobile" /></el-form-item><el-form-item label="密码" prop="pass"><el-input v-model="ruleForm.pass" type="password" /></el-form-item><el-form-item><el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button></el-form-item></el-form>
</template><script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";const phoneRegular = /^1[23456789]\d{9}$/;const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({mobile: "",pass: "",
});function customMobile(_: any, value: any, callback: any) {if (phoneRegular.test(value)) callback();else callback(new Error("请输入正确的手机号"));
}
const rules = reactive<FormRules<typeof ruleForm>>({mobile: [{ required: true, message: "请输入手机号", trigger: ["blur", "change"] },// 正则{ pattern: phoneRegular, message: "请输入正确的手机号", trigger: ["blur", "change"] },// 自定义验证{ validator: customMobile, trigger: ["blur", "change"] },],pass: [{ required: true, message: "请输入密码", trigger: ["blur", "change"] }],
});const submitForm = (formEl: FormInstance | undefined) => {if (!formEl) return;formEl.validate((valid) => {if (valid) {console.log("submit!");} else {console.log("error submit!");return false;}});
};
</script>

正则验证

const phoneRegular = /^1[23456789]\d{9}$/;const rules = reactive<FormRules<typeof ruleForm>>({mobile: [// 正则{ pattern: phoneRegular, message: "请输入正确的手机号", trigger: ["blur", "change"] },]
});

自定义函数验证

const phoneRegular = /^1[23456789]\d{9}$/;
function customMobile(_: any, value: any, callback: any) {if (phoneRegular.test(value)) callback();else callback(new Error("请输入正确的手机号"));
}
const rules = reactive<FormRules<typeof ruleForm>>({mobile: [// 自定义验证{ validator: customMobile, trigger: ["blur", "change"] },]
});

数据结构嵌套对象验证写法

在这里插入图片描述

<template><el-form ref="ruleFormRef" :model="ruleForm" :rules="rules"><el-form-item label="手机号" prop="mobile"><el-input v-model="ruleForm.mobile" /></el-form-item><el-form-item label="密码" prop="user.pass"><el-input v-model="ruleForm.user.pass" type="password" /></el-form-item><el-form-item><el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button></el-form-item></el-form>
</template><script lang="ts" setup>
const ruleForm = reactive({mobile: "",user: {pass: "",},
});const rules = reactive<FormRules<typeof ruleForm>>({mobile: [{ required: true, message: "请输入手机号", trigger: ["blur", "change"] }],"user.pass": [{ required: true, message: "请输入密码", trigger: ["blur", "change"] }],
});
</script>

数据结构为数组验证写法

<template><el-form ref="ruleFormRef" :model="ruleForm" :rules="rules"><el-form-item label="图片" prop="images"><div>请选择图片</div></el-form-item><el-form-item><el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button><el-button type="primary" @click="ruleForm.images.push('http:')">追加 images {{ ruleForm.images }}</el-button></el-form-item></el-form>
</template><script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";interface RuleForm {images: string[];
}
const ruleFormRef = ref<FormInstance>();
const ruleForm: RuleForm = reactive({images: [],
});const rules = reactive<FormRules<typeof ruleForm>>({images: [{ required: true, message: "请上传图片", trigger: ["blur", "change"] },// 定义类型必填 array ,数组 length 必须为 2{ type: "array", len: 2, message: "请上传两张图片", trigger: ["blur", "change"] },// 验证数组范围 2-4{ type: "array", min: 2, max: 4, message: "请上传2-4张图片", trigger: ["blur", "change"] },],
});const submitForm = (formEl: FormInstance | undefined) => {if (!formEl) return;formEl.validate((valid) => {if (valid) {console.log("submit!");} else {console.log("error submit!");return false;}});
};
</script>

validateField 验证具体的某个某些字段

import type { FormInstance } from 'element-plus';
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({mobile: "",pass: "",
});ruleFormRef?.value?.validateField(['mobile'], flag => {// flag true 全部验证通过, false 验证不通过
})// 验证多个写法
ruleFormRef?.value?.validateField(['mobile','pass'], flag => {})

动态切换是否需要添加验证规则

动态修改 rules,而不是修改 prop
在这里插入图片描述

<template><el-form ref="ruleFormRef" :model="ruleForm"><el-form-item label="手机号" prop="mobile" :rules="flag ? rules['mobile'] : ruleEmpty"><el-input v-model="ruleForm.mobile" /></el-form-item><el-form-item label="密码" prop="pass" :rules="flag ? rules['pass'] : ruleEmpty"><el-input v-model="ruleForm.pass" type="password" /></el-form-item><el-form-item><el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button><el-button type="primary" @click="flag = !flag">切换 flag {{ flag }}</el-button></el-form-item></el-form>
</template><script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({mobile: "",pass: "",
});const flag = ref(true);
const ruleEmpty = { required: false };
const rules = reactive<FormRules<typeof ruleForm>>({mobile: [{ required: true, message: "请输入手机号", trigger: ["blur", "change"] }],pass: [{ required: true, message: "请输入密码", trigger: ["blur", "change"] }],
});const submitForm = (formEl: FormInstance | undefined) => {if (!formEl) return;formEl.validate((valid) => {if (valid) {console.log("submit!");} else {console.log("error submit!");return false;}});
};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/179590.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙原生应用/元服务开发-AGC分发如何生成密钥和和证书请求文件

HarmonyOS通过数字证书&#xff08;.cer文件&#xff09;和Profile文件&#xff08;.p7b文件&#xff09;等签名信息来保证应用的完整性&#xff0c;应用如需上架到华为应用市场必须通过签名校验。因此&#xff0c;开发者需要使用发布证书和Profile文件对应用进行签名后才能发布…

互联网程序设计HTML+CSS+JS

一、HTML基础 HTML超文本标记语言。 超文本&#xff1a;链接&#xff1b; 标记&#xff1a;标签&#xff0c;带尖括号的文本。 1、标签结构 标签要成对出现&#xff0c;中间包裹内容&#xff1b; <>里面放英文字母&#xff08;标签名&#xff09;&#xff1b; 结束…

在centos7上源码安装nginx

1. 安装必要的编译工具和依赖项 在编译Nginx之前&#xff0c;你需要安装一些编译工具和依赖项。可以通过以下命令安装&#xff1a; yum install gcc-c pcre-devel zlib-devel make 2. 下载Nginx源代码 从Nginx官网下载最新的源代码。你可以使用wget命令来下载&#xff1a; …

Java 基础学习(三)循环流程控制与数组

1 循环流程控制 1.1 循环流程控制概述 1.1.1 什么是循环流程控制 当一个业务过程需要多次重复执行一个程序单元时&#xff0c;可以使用循环流程控制实现。 Java中包含3种循环结构&#xff1a; 1.2 for循环 1.2.1 for循环基础语法 for循环是最常用的循环流程控制&#xff…

redis运维(二十二)redis 的扩展应用 lua(四)

一 最佳实践 ① 铺垫 最佳实践&#xff1a;1、把redis操作所需的key通过KEYS进行参数传递2、其它的lua脚本所需的参数通过ARGV进行传递. redis lua脚本原理 Redis Lua脚本的执行原理 ② 删除指定的脚本缓存 ③ redis集群模式下使用lua脚本注意事项 1、常见报错现象 C…

『 Linux 』进程优先级

文章目录 什么是优先级Linux下的进程优先级PRI与NI使用top查看进程以及对进程的优先级的修改 进程优先级的其他概念竞争性与独立性并发与并行 什么是优先级 优先级,顾名思义,即在同一环境下不同单位对同一个资源的享有顺序; 一般优先级高的单位将优先占有该资源; 在进程当中进…

Python中如何用栈实现队列

目录 一、引言 二、使用两个栈实现队列 三、性能分析 四、应用场景 五、代码示例 六、优缺点总结 一、引言 队列&#xff08;Queue&#xff09;和栈&#xff08;Stack&#xff09;是计算机科学中常用的数据结构。队列是一种特殊的线性表&#xff0c;只允许在表的前端进行…

Leetcode 380. O(1) 时间插入、删除和获取随机元素

文章目录 题目代码&#xff08;11.28 首刷看解析&#xff09; 题目 Leetcode 380. O(1) 时间插入、删除和获取随机元素 代码&#xff08;11.28 首刷看解析&#xff09; 1.length:表示的是数组的长度 数组 2.length():表示的是字符串的长度 字符串 3.size():表示的是集合中有多…

万宾科技可燃气体监测仪科技作用全览

燃气管网在运行过程中经常会遇到燃气管道泄漏的问题&#xff0c;燃气泄漏甚至会引起爆炸&#xff0c;从而威胁人民的生命和财产安全&#xff0c;因此对燃气管网进行定期巡检是十分必要的工作。但是传统的人工巡检已不能满足城市的需要&#xff0c;除了选择增加巡检人员之外&…

Web UI自动化测试框架

WebUI automation testing framework based on Selenium and unittest. 基于 selenium 和 unittest 的 Web UI自动化测试框架。 特点 提供更加简单API编写自动化测试。提供脚手架&#xff0c;快速生成自动化测试项目。自动生成HTML测试报告生成。自带断言方法&#xff0c;断言…

笔记:Pika Labs 3D 动画生成工具

Pika Labs 一款3D 动画生成工具 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/134657306 目 录 1. 简介2. 准备2.1 安装 discord2.2 加入 Discord 频道 3. Pika 使用指南2.1 快速开始2.2 从图像到视频2.3 Pika Bot按钮2.4 提示&#xff08;Prompt&a…

面试题:说一下MyBatis动态代理原理?

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.MyBatis简介2.使用步骤2.1、引入依赖2.2、配置文件2.3、接口定义2.4、加载执行 3.原理解析 1.MyBatis简介 MyBatis是一个ORM工具&#xff0c;封装了JDBC的操作&a…

Redis 主从架构,Redis 分区,Redis哈希槽的概念,为什么要做Redis分区

文章目录 Redis 主从架构redis replication 的核心机制redis 主从复制的核心原理过程原理Redis集群的主从复制模型是怎样的&#xff1f;生产环境中的 redis 是怎么部署的&#xff1f;机器是什么配置&#xff1f;你往内存里写的是什么数据&#xff1f;说说Redis哈希槽的概念&…

前端入门(四)Ajax、Promise异步、Axios通信、vue-router路由

文章目录 AjaxAjax特点 Promise 异步编程&#xff08;缺&#xff09;Promise基本使用状态 - PromiseState结果 - PromiseResult Axios基本使用 Vue路由 - vue-router单页面Web应用&#xff08;single page web application&#xff0c;SPA&#xff09;vue-router基本使用路由使…

Rabbitmq发送邮件并消费邮件

&#x1f4d1;前言 本文主要是【Rabbitmq】——Rabbitmq发送邮件并消费邮件的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1…

【数学】旋转矩阵

参考链接 OpenGL from OpenGL.GL import * from OpenGL.GLUT import * from math import * import numpy as np def draw_axes():glClear(GL_COLOR_BUFFER_BIT)# 绘制坐标轴glColor3f(1.0, 1.0, 1.0) # 设置坐标轴颜色为白色glBegin(GL_LINES)glVertex2f(-1.0, 0.0) # x 轴g…

Python中使用matplotlib库绘图中如何给图形的图例设置中文字体显示

问题&#xff1a;当使用matplotlib绘图时遇到绘图&#xff0c;图例显示不出来中文字体 解决方式&#xff1a; 1&#xff09;加载字体管理库 from matplotlib.font_manager import FontProperties 2&#xff09;设置系统上字体的路径 font FontProperties(fname"C:\\W…

直线(蓝桥杯)

直线 题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 在平面直角坐标系中&#xff0c;两点可以确定一条直线。如果有多点在一条直线上&#xff0c; 那么这些点中任意两点确定的直线是同一条。 给定平面上 2 3 个…

VMD扩展molUP安装与高斯接口使用

molUP是一个VMD扩展&#xff0c;提供了一个简单的方式来加载和保存高斯文件&#xff0c;并分析相关的结果。 molUP为VMD提供了一个图形界面&#xff0c;用户可以加载和保存高斯文件格式的化学结构。这个扩展包括一组工具来设置高斯支持的任何计算&#xff0c;包括ONIOM通过互动…

音视频学习(十九)——rtsp收流(tcp方式)

前言 本文主要介绍以tcp方式实现rtsp拉流。 流程图 流程说明: 客户端发起tcp请求&#xff0c;如向真实相机设备请求&#xff0c;端口一般默认554&#xff1b;tcp连接成功&#xff0c;客户端与服务端开始rtsp信令交互&#xff1b;客户端收到play命令响应后&#xff0c;开启线…