(el-Form)操作(不使用 ts)：Element-plus 中 Form 表单组件校验规则等的使用

Ⅰ、Element-plus 提供的 Form 表单组件与想要目标情况的对比：

1、Element-plus 提供 Form 表单组件情况：

其一、Element-plus 自提供的 Form 代码情况为(示例的代码)：

在这里插入图片描述


// Element-plus 自提供的代码：
// 此时是使用了 ts 语言环境，但是我在实际项目中并没有使用 ts 语言和环境；<template><el-formref="ruleFormRef":model="ruleForm"status-icon:rules="rules"label-width="120px"class="demo-ruleForm"><el-form-item label="Password" prop="pass"><el-input v-model="ruleForm.pass" type="password" autocomplete="off" /></el-form-item><el-form-item label="Confirm" prop="checkPass"><el-inputv-model="ruleForm.checkPass"type="password"autocomplete="off"/></el-form-item><el-form-item label="Age" prop="age"><el-input v-model.number="ruleForm.age" /></el-form-item><el-form-item><el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button><el-button @click="resetForm(ruleFormRef)">Reset</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 checkAge = (rule: any, value: any, callback: any) => {if (!value) {return callback(new Error('Please input the age'))}setTimeout(() => {if (!Number.isInteger(value)) {callback(new Error('Please input digits'))} else {if (value < 18) {callback(new Error('Age must be greater than 18'))} else {callback()}}}, 1000)
}const validatePass = (rule: any, value: any, callback: any) => {if (value === '') {callback(new Error('Please input the password'))} else {if (ruleForm.checkPass !== '') {if (!ruleFormRef.value) returnruleFormRef.value.validateField('checkPass', () => null)}callback()}
}
const validatePass2 = (rule: any, value: any, callback: any) => {if (value === '') {callback(new Error('Please input the password again'))} else if (value !== ruleForm.pass) {callback(new Error("Two inputs don't match!"))} else {callback()}
}const ruleForm = reactive({pass: '',checkPass: '',age: '',
})const rules = reactive<FormRules<typeof ruleForm>>({pass: [{ validator: validatePass, trigger: 'blur' }],checkPass: [{ validator: validatePass2, trigger: 'blur' }],age: [{ validator: checkAge, trigger: 'blur' }],
})const submitForm = (formEl: FormInstance | undefined) => {if (!formEl) returnformEl.validate((valid) => {if (valid) {console.log('submit!')} else {console.log('error submit!')return false}})
}const resetForm = (formEl: FormInstance | undefined) => {if (!formEl) returnformEl.resetFields()
}
</script>

代码地址(直接点击下面 url 跳转)：https://element-plus.gitee.io/zh-CN/component/form.html#自定义校验规则

其二、页面的显示情况为：

在这里插入图片描述

2、目标想修改后的情况:

// 此时虽然页面的样式有些变化，但实际上的用 form 语法或校验规则等都是没有变化的;

在这里插入图片描述

Ⅱ、实现 Form 表单组件达到目标效果变化的过程：

1、 Form 表单组件成功引入 vue3 项目的过程(去除了 ts 的语法)：

其一、代码(以 age 为例)：

<script setup>import {ref} from 'vue'const ruleFormRef = ref(null)   // 注意：一定要定义 form 表单中 ref 的 ruleFormRef 的值，否则会一直报错;const ruleForm = ref({pass: "",checkPass: "",age: '',// size: '4000',// ip: '0.0.0.0'
})// 重置的操作;
const resetForm = (val) => {debuggerif (!val) returnval.resetFields()  // resetFields 函数：是将表单字段的值重置为其默认值;
}// age 的规则是：让 age 的值，不能为空，为数字，且数字值不小于 18;
const checkAge = (rule, value, callback) => {if (!value) {  // 此时是判空，如果 age 中为空，就抛出该提示信息;return callback(new Error('Please input the age'))}setTimeout(() => {if (!Number.isInteger(value)) {   // 此时是：判断 age 中输入的值是否是数字，如果不是数字就抛出该提示信息;callback(new Error('Please input digits'))} else {if (value < 18) { // 此时是：判断 age 中输入的数字是否小于 18，如果小于 18，就抛出该提示信息;callback(new Error('Age must be greater than 18'))} else {callback()}}}, 1000)
}// 注意：在 rules 方法中 validator 属性后面的方法，一定要定义在 rules 函数前，否则会报错;
const rules = ref({age: [{ validator: checkAge, trigger: 'blur' }],
})// 此时是：提交表单的操作;
const submitForm = () => {if (!ruleFormRef.value) returnruleFormRef.value.validate((valid) => {  // 注意：此时使用的是 ruleFormRef.value，而仅写 ruleFormRef 是拿不到值且会报错的;if (valid) {   // 注意：只有当所有的规则都满足后，此时的 valid 的值才为 true，才能执行下面的值;console.log('submit!')} else {console.log('error submit!')return false}})
}</script><template><div class="project_background"><div class="my_project"><el-formref="ruleFormRef":model="ruleForm"status-icon:rules="rules"label-width="80px"class="demo-ruleForm"><el-form-item label="Password" prop="pass"><el-input v-model="ruleForm.pass" type="password" autocomplete="off" /></el-form-item><el-form-item label="Confirm" prop="checkPass"><el-input v-model="ruleForm.checkPass" type="password" autocomplete="off"/></el-form-item><el-form-item label="Age" prop="age"><el-input v-model.number="ruleForm.age" /></el-form-item><!-- <el-form-item label="大小" prop="log_size"><el-tooltip class="box-item" effect="light" content="请填写 500 到 4000 的数" placement="top"><el-input v-model="ruleForm.size" placeholder="请输入"/></el-tooltip></el-form-item><el-form-item label="IP" prop="log_service_ip"><el-tooltip class="box-item" effect="light" content="请填写合法的 ip 地址" placement="top"><el-input v-model="ruleForm.ip" placeholder="请输入"/></el-tooltip></el-form-item>  --><el-form-item><el-button type="primary" @click="submitForm(ruleFormRef)"><el-icon :size="20" style="margin-right: 5px;"><CircleCheckFilled /></el-icon>Submit</el-button><el-button @click="resetForm(ruleFormRef)">Reset</el-button></el-form-item></el-form></div></div>
</template><style lang="scss" scoped>.project_background {margin: 30px auto;background-color: #e6f1f9;box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 40px 0px;.my_project {margin: 20px;}}
</style>

其二、效果展示：

A、输入的值不是数字会报错：

在这里插入图片描述
B、输入的值的小于 18 也会报错：

在这里插入图片描述
C、只有正确的值才能成功提交：

在这里插入图片描述

Ⅲ、修改 Form 表单组件达到目标效果的展示：

1、整体的代码(即：总的代码)：


// 此时是去除 ts 的 Element-plus 组件的 vue3 语法的代码：<script setup>import {ref} from 'vue'const ruleFormRef = ref(null)   // 注意：一定要定义 form 表单中 ref 的 ruleFormRef 的值，否则会一直报错;const ruleForm = ref({pass: "",checkPass: "",age: ''
})// 重置的操作;
const resetForm = (val) => {debuggerif (!val) returnval.resetFields()  // resetFields 函数：是将表单字段的值重置为其默认值;
}// Password 的规则是：让 Password 的输入值，不能为空，且若 Confirm 的输入值不为空时，在 Password 的输入值后在执行一遍 Confirm 的规则;
const validatePass = (rule, value, callback) => {if (value === '') {  // 此时是判空，如果 Password 中为空，就抛出该提示信息;callback(new Error('Please input the password'))} else {if (ruleForm.value.checkPass !== '') {  // 此时是：判断 Confirm 输入的值是否为空;if (!ruleFormRef.value) return  // 只要 Confirm 中有输入，此时的 !ruleFormRef.value 的布尔值为 false;ruleFormRef.value.validateField('checkPass', () => null) // validateField 是用于对表单中的字段进行验证的方法，来确保数据的正确性;// 个人理解是：在 Confirm 中有输入与 Password 的输入对比的操作，因此可以理解为：对 'checkPass'(即：Confirm)// 进行监听，即：有执行了一遍 Confirm 的验证(确定：通过 debugger 验证了猜想);}callback()}
}// Confirm 的规则是：让 Confirm 的输入值，不能为空，且与 Password 的输入值要保持一致;
const validatePass2 = (rule, value, callback) => {if (value === '') {  // 此时是判空，如果 Confirm 中为空，就抛出该提示信息;callback(new Error('Please input the password again'))} else if (value !== ruleForm.value.pass) { // 此时是：判断 Confirm 输入的值是否与 Password 输入的值相同，若不相同，就抛出该提示信息;callback(new Error("Two inputs don't match!"))} else { // 只有 Confirm 输入的值与 Password 输入的值相同，才没问题(前提是：Passwork 与 Confirm 中都有值);callback()}
}// age 的规则是：让 age 的值，不能为空，为数字，且数字值不小于 18;
const checkAge = (rule, value, callback) => {if (!value) {  // 此时是判空，如果 age 中为空，就抛出该提示信息;return callback(new Error('Please input the age'))}setTimeout(() => {if (!Number.isInteger(value)) {   // 此时是：判断 age 中输入的值是否是数字，如果不是数字就抛出该提示信息;callback(new Error('Please input digits'))} else {if (value < 18) { // 此时是：判断 age 中输入的数字是否小于 18，如果小于 18，就抛出该提示信息;callback(new Error('Age must be greater than 18'))} else {callback()}}}, 1000)
}// 注意：在 rules 方法中 validator 属性后面的方法，一定要定义在 rules 函数前，否则会报错;
const rules = ref({// form 表单前面有没有小红星，取决于有没有 'required: true' 的属性，如果有这个属性页面就有小红星，而没有这个属性就没有小红星;pass: [{ required: true, validator: validatePass, trigger: 'blur' }],checkPass: [{ validator: validatePass2, trigger: 'blur' }],age: [{ validator: checkAge, trigger: 'blur' }],
})// 此时是：提交表单的操作;
const submitForm = () => {if (!ruleFormRef.value) returnruleFormRef.value.validate((valid) => {  // 注意：此时使用的是 ruleFormRef.value，而仅写 ruleFormRef 是拿不到值且会报错的;if (valid) {   // 注意：只有当所有的规则都满足后，此时的 valid 的值才为 true，才能执行下面的值;console.log('submit!')} else {console.log('error submit!')return false}})
}</script><template><div class="project_background"><div class="my_project"><el-formref="ruleFormRef":model="ruleForm"status-icon:rules="rules"label-width="80px"class="demo-ruleForm"><el-form-item label="Password" prop="pass"><el-input v-model="ruleForm.pass" type="password" autocomplete="off" /></el-form-item><el-form-item label="Confirm" prop="checkPass"><el-input v-model="ruleForm.checkPass" type="password" autocomplete="off"/></el-form-item><el-form-item label="Age" prop="age"><el-input v-model.number="ruleForm.age" /></el-form-item><el-form-item><el-button type="primary" @click="submitForm(ruleFormRef)"><el-icon :size="20" style="margin-right: 5px;"><CircleCheckFilled /></el-icon>Submit</el-button><el-button @click="resetForm(ruleFormRef)">Reset</el-button></el-form-item></el-form></div></div>
</template><style lang="scss" scoped>.project_background {margin: 30px auto;background-color: #e6f1f9;box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 40px 0px;.my_project {margin: 20px;}}
</style>

2、整体效果的展示：

在这里插入图片描述

Ⅳ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

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

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

相关文章

6.3 社会工程学攻击

6.3 社会工程学攻击

数据参考&#xff1a;CISP官方 目录 社会工程学攻击概念社会工程学攻击利用的人性 “弱点”典型社会工程学攻击方式社会工程学攻击防护 一、社会工程学攻击概念 什么是社会工程学攻击 也被称为 "社交工程学" 攻击利用人性弱点 (本能反应、贪婪、易于信任等) 进…
阅读更多...
栈存储结构详解

栈存储结构详解

目录 栈存储结构详解 进栈和出栈 栈的具体实现 栈的应用 什么是队列&#xff08;队列存储结构&#xff09; 栈存储结构详解 同顺序表和链表一样&#xff0c;栈也是用来存储逻辑关系为 "一对一" 数据的线性存储结构&#xff0c;如图 1 所示。 图 1 栈存储结构示意…
阅读更多...
HTML5的介绍和基本框架

HTML5的介绍和基本框架

目录 HTML5 HTML5介绍 HTML5的DOCTYPE声明 HTML5基本骨架 html标签 head标签 body标签 title标签 meta标签 在vscode中写出第一个小框架 HTML5 HTML5介绍 HTML5是用来描述网页的一种语言&#xff0c;被称为超文本标记语言。用HTML5编写的文件&#xff0c;后缀以.ht…
阅读更多...
设备加密狗

设备加密狗

场景描述 随着科技的飞速发展&#xff0c;越来越多的智能设备走进生产加工车间。例如智能雕刻机、钣金机、 榫槽机、钻孔机、磨刀机等等。 目前市场的智能设备具有一个共同的特点&#xff0c;内置嵌入操作系统&#xff0c;如windows或者linux系统。设备制造商提供智能设备出…
阅读更多...
连续两年增收不增利，比亚迪电子靠新能源汽车业务再次起飞？

连续两年增收不增利，比亚迪电子靠新能源汽车业务再次起飞？

在净利润连续两年下挫之后&#xff0c;比亚迪电子&#xff08;00285.HK&#xff09;终于迎来了好消息。 不久前比亚迪电子发布2023年中期盈利预告显示&#xff0c;上半年净利润同比增加115%-146%&#xff08;2022年上半年的净利润显示6.34亿元&#xff09;。 这主要受益于大客…
阅读更多...
包管理工具 nvm npm nrm yarn cnpm npx pnpm详解

包管理工具 nvm npm nrm yarn cnpm npx pnpm详解

包管理工具 nvm npm yarn cnpm npx pnpm npm、cnpm、yarn、pnpm、npx、nvm的区别&#xff1a;https://blog.csdn.net/weixin_53791978/article/details/122533843 npm、cnpm、yarn、pnpm、npx、nvm的区别&#xff1a;https://blog.csdn.net/weixin_53791978/article/details/1…
阅读更多...
强训第32

强训第32

选择 D B A A 发送TCP意思应该是已经建立了连接&#xff0c;会超时重传。在未建立连接的时候&#xff0c;会放弃该链接 C A 80端口是http A 交换机攻击主要有五种&#xff1a;VLAN跳跃攻击 生成树攻击 MAC表洪水攻击 ARP攻击 VTP攻击 B A 2^(32-26)2^(32-27)2^(32-27)128 减去…
阅读更多...
基于Java+SpringBoot+Vue+echarts健身房管理系统设计和实现

基于Java+SpringBoot+Vue+echarts健身房管理系统设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…
阅读更多...
maven Jar包反向install到本地仓库

maven Jar包反向install到本地仓库

maven Jar包反向install到本地仓库 需求实现 需求 项目打包时报错&#xff0c;缺少一个jar包。 但是在maven仓库都找不到此jar包&#xff0c;其他人提供了这个jar包。 需要把这个jar包install到本地仓库&#xff0c;使项目能正常打包运行。 实现 使用git bash命令执行以下脚…
阅读更多...
16.3.4 【Linux】系统资源的观察

16.3.4 【Linux】系统资源的观察

free &#xff1a;观察内存使用情况 系统当中有 2848MB 左右的实体内存&#xff0c;我的 swap 有 1GB 左右&#xff0c; 那我使用free -m 以 MBytes 来显示时&#xff0c;就会出现上面的信息。Mem 那一行显示的是实体内存的量&#xff0c;Swap 则是内存交换空间的量。 total 是…
阅读更多...
C++多态

C++多态

文章目录 &#x1f435;1. 什么是多态&#x1f436;2. 构成多态的条件&#x1f429;2.1 虚函数&#x1f429;2.2 虚函数的重写&#x1f429;2.3 final 和 override关键字&#x1f429;2.4 重载、重写、重定义对比 &#x1f431;3. 虚函数表&#x1f42f;4. 多态的原理&#x1f…
阅读更多...
【变形金刚01】attention和transformer所有信息

【变形金刚01】attention和transformer所有信息

图1.来源&#xff1a;Arseny Togulev在Unsplash上的照片 一、说明 这是一篇 长文 &#xff0c;几乎讨论了人们需要了解的有关注意力机制的所有信息&#xff0c;包括自我注意、查询、键、值、多头注意力、屏蔽多头注意力和转换器&#xff0c;包括有关 BERT 和 GPT 的一些细节。因…
阅读更多...
OpenCV图像处理——轮廓检测

OpenCV图像处理——轮廓检测

目录 图像的轮廓查找轮廓绘制轮廓 轮廓的特征轮廓面积轮廓周长轮廓近似凸包边界矩形最小外接圆椭圆拟合直线拟合 图像的矩特征矩的概念图像中的矩特征 图像的轮廓 查找轮廓 binary,contours,hierarchycv.findContours(img,mode,method)绘制轮廓 cv.drawContours(img,coutours…
阅读更多...
印度货代专线【我国到印度专线有哪些方式】

印度货代专线【我国到印度专线有哪些方式】

随着全球贸易的不断发展&#xff0c;我国与印度之间的贸易往来也日益频繁。作为两个人口最多的国家之一&#xff0c;中国和印度之间的货物运输需求不断增长。为了满足这一需求&#xff0c;印度货代专线应运而生&#xff0c;为进出口商提供高效、可靠的货物运输服务。本文将探索…
阅读更多...
939. 最小面积矩形；2166. 设计位集；2400. 恰好移动 k 步到达某一位置的方法数目

939. 最小面积矩形；2166. 设计位集；2400. 恰好移动 k 步到达某一位置的方法数目

939. 最小面积矩形 核心思想&#xff1a;枚举矩形的右边那条边的两个点&#xff0c;并用一个哈希表存储相同纵坐标的最近出现的列的列数,不断更新最近出现的左边那条边。 2166. 设计位集 核心思想&#xff1a;这题主要是时间复杂度的优化&#xff0c;用一个flag来标记当前翻转…
阅读更多...
CSS自学框架之表单

CSS自学框架之表单

首先我们看一下表单样式&#xff0c;下面共有5张截图 一、CSS代码 /*表单*/fieldset{border: none;margin-bottom: 2em;}fieldset > *{ margin-bottom: 1em }fieldset:last-child{ margin-bottom: 0 }fieldset legend{ margin: 0 0 1em }/* legend标签是CSS中用于定义…
阅读更多...
IOS开发-XCode14介绍与入门

IOS开发-XCode14介绍与入门

IOS开发-XCode14介绍与入门 1. XCODE14的小吐槽2. XCODE的功能bar一览3. XCODE项目配置一览4. XCODE更改DEBUG/RELEASE模式5. XCODE单元测试 1. XCODE14的小吐槽 iOS开发工具一直有个毛病&#xff0c;就是新版本的开发工具的总会有一些奇奇怪怪的bug。比如在我的Mac-Pro&#…
阅读更多...
Springboot 实践（3）配置DataSource及创建数据库

Springboot 实践（3）配置DataSource及创建数据库

前文讲述了利用MyEclipse2019开发工具&#xff0c;创建maven工程、加载springboot、swagger-ui功能。本文讲述创建数据库&#xff0c;为项目配置数据源&#xff0c;实现数据的增删改查服务&#xff0c;并通过swagger-ui界面举例调试服务控制器 创建数据库 项目使用MySQL 8.0.…
阅读更多...
vue基础知识四：Vue实例挂载的过程

vue基础知识四：Vue实例挂载的过程

一、思考 我们都听过知其然知其所以然这句话 那么不知道大家是否思考过new Vue()这个过程中究竟做了些什么&#xff1f; 过程中是如何完成数据的绑定&#xff0c;又是如何将数据渲染到视图的等等 一、分析 首先找到vue的构造函数 源码位置&#xff1a;src\core\instance\…
阅读更多...
一生一芯4——使用星火应用商店在ubuntu下载QQ、微信、百度网盘

一生一芯4——使用星火应用商店在ubuntu下载QQ、微信、百度网盘

星火应用商店可以非常方便的完成一些应用的下载&#xff0c;下面是官方网址 http://spark-app.store/download 我使用的是intel处理器&#xff0c;无需下载依赖项&#xff0c;直接点击软件本体 我这里下载amd64,根据自己的处理器下载对应版本 sudo apt install ./spark-stor…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023