(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.rhkb.cn/news/86565.html

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

相关文章

机器学习深度学习——从编码器-解码器架构到seq2seq（机器翻译）

机器学习深度学习——从编码器-解码器架构到seq2seq（机器翻译）

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——注意力提示、注意力池化&#xff08;核回归&#xff09; &#x1f4da;订阅专栏&#xff1a;机器学习&a…
阅读更多...
使用 prometheus client SDK 暴露指标

使用 prometheus client SDK 暴露指标

目录 1. 使用 prometheus client SDK 暴露指标1.1. How Go exposition works1.2. Adding your own metrics1.3. Other Go client features 2. Golang Application monitoring using Prometheus2.1. Metrics and Labels2.2. Metrics Types2.2.1. Counters:2.2.2. Gauges:2.2.3. …
阅读更多...
写一个函数返回参数二进制中 1 的个数(c语言三种实现方法)

写一个函数返回参数二进制中 1 的个数(c语言三种实现方法)

&#xff08;本文旨在自己做题时的总结&#xff0c;我会给出不同的解法&#xff0c;后面如果碰到新的题目还会加入其中&#xff0c;等于是我自己的题库。 1.写一个函数返回参数二进制中 1 的个数。 比如&#xff1a; 15 0000 1111 4 个 1 方法一&#xff1a; #include…
阅读更多...
基于 eclipse-temurin 镜像部署spring boot 应用

基于 eclipse-temurin 镜像部署spring boot 应用

基于 eclipse-temurin 镜像部署spring boot 应用 使用场景示例项目 使用场景 在CI流程中&#xff0c;一般都会集成 打包&#xff0c;构建镜像&#xff0c;分发&#xff0c;启动容器之类的流程&#xff1b; 这里提供一个示例&#xff0c;进攻参考 示例项目 项目结构如下 run…
阅读更多...
Django基础

Django基础

1.Django基础 路由系统视图模板静态文件和媒体文件中间件ORM&#xff08;时间&#xff09; 2.路由系统 本质上&#xff1a;URL和函数的对应关系。 2.1 传统的路由 from django.contrib import admin from django.urls import path from apps.web import viewsurlpatterns …
阅读更多...
体渲染原理及WebGL实现【Volume Rendering】

体渲染原理及WebGL实现【Volume Rendering】

体渲染&#xff08;Volume Rendering&#xff09;是NeRF神经场辐射AI模型的基础&#xff0c;与传统渲染使用三角形来显示 3D 图形不同&#xff0c;体渲染使用其他方法&#xff0c;例如体积光线投射 (Volume Ray Casting)。本文介绍体渲染的原理并提供Three.js实现代码&#xff…
阅读更多...
【Nginx】Nginx网站服务

【Nginx】Nginx网站服务

国外主流还是使用apache&#xff1b;国内现在主流是nginx&#xff08;并发能力强&#xff0c;相对稳定&#xff09; nginx&#xff1a;高新能、轻量级的web服务软件 特点&#xff1a; 1.稳定性高&#xff08;没apache稳&#xff09;&#xff1b; 2.系统资源消耗比较低&#xf…
阅读更多...
Windows电脑快速搭建FTP服务教程

Windows电脑快速搭建FTP服务教程

FTP介绍 FTP&#xff08;File Transfer Protocol&#xff09;是一种用于在计算机网络上进行文件传输的标准协议。它提供了一种可靠的、基于客户端-服务器模型的方式来将文件从一个主机传输到另一个主机。在本文中&#xff0c;我将详细介绍FTP的工作原理、数据传输模式以及常见…
阅读更多...
从Spring源码看Spring如何解决循环引用的问题

从Spring源码看Spring如何解决循环引用的问题

Spring如何解决循环引用的问题 关于循环引用&#xff0c;首先说一个结论&#xff1a; Spring能够解决的情况为&#xff1a;两个对象都是单实例、且通过set方法进行注入。 两个对象都是单实例&#xff0c;通过构造方法进行注入&#xff0c;Spring不能进行循环引用问题&#x…
阅读更多...
分布式问题

分布式问题

1. 分布式系统CAP原理 CAP原理&#xff1a;指在一个分布式系统中&#xff0c;Consistency&#xff08;一致性&#xff09;、Availability&#xff08;可用性&#xff09;、Partitontolerance&#xff08;分区容忍性&#xff09;&#xff0c;三者不可得兼。 一致性&#xff08;C…
阅读更多...
DVWA暴力破解高级模式宏爆破

DVWA暴力破解高级模式宏爆破

先将安全等级调至高级&#xff0c;点击submit提交 浏览器开启bp代理 kali开启bp 工具&#xff0c;开启Proxy 点击Brute Force这个选项卡 bp拦截到请求的数据包 宏设置 如果是有的bp版本比较旧&#xff0c;在旧版本的上面菜单栏有一个Project options点击去选择Session&#xff…
阅读更多...
智能优化算法：白鲨优化算法-附代码

智能优化算法：白鲨优化算法-附代码

智能优化算法&#xff1a;白鲨优化算法 文章目录 智能优化算法&#xff1a;白鲨优化算法1.白鲨优化算法1.1 初始化1.2 速度更新1.3位置更新1.4鱼群行为 2.实验结果3.参考文献4.Matlab5.python 摘要&#xff1a;WSO 算法是 Braik 等于 2022 年提出一种基于白鲨深海觅食策略的新型…
阅读更多...
算法与数据结构（二十二）动态规划解题套路框架

算法与数据结构（二十二）动态规划解题套路框架

动态规划解题套路框架 此文只在个人总结 labuladong 动态规划框架&#xff0c;仅限于学习交流&#xff0c;版权归原作者所有&#xff1b; 动态规划问题&#xff08;Dynamic Programming&#xff09;应该是很多读者头疼的&#xff0c;不过这类问题也是最具有技巧性&#xff0c…
阅读更多...
计算机网络实验2：网络嗅探

计算机网络实验2：网络嗅探

文章目录 1. 主要教学内容2. Wireshark介绍3. Wireshark下载4. 使用Wireshark捕获包4.1 选择网卡4.2 停止抓包4.3 保存数据 5. Wireshark的过滤规则6. Wireshark实例 1. 主要教学内容 实验内容&#xff1a;安装、学习使用网络包分析工具Wireshark。所需学时&#xff1a;1。重难…
阅读更多...
基于概率神经网络的变压器故障诊断

基于概率神经网络的变压器故障诊断

1.案例背景 1.1 PNN概述 概率神经网络(probabilistic neural networks. PNN)是 D.F.Specht博士在1989年首先提出的,是一种基于Bayes分类规则与Parzen窗的概率密度函数估计方法发展而来的并行算法。它是一类结构简单、训练简洁,应用广泛的人工神经网络。在实际应用中,尤其是在解…
阅读更多...
纯鸿蒙！华为HarmonyOS NEXT不再兼容安卓应用，无法安装Apk文件

纯鸿蒙！华为HarmonyOS NEXT不再兼容安卓应用，无法安装Apk文件

8月7日消息&#xff0c;近日&#xff0c;华为举行2023年华为开发者大会&#xff08;HDC.Together&#xff09;上&#xff0c;除了发布HarmonyOS 4、全新升级的鸿蒙开发套件外&#xff0c;华为还带来了HarmonyOS NEXT开发者预览版。 据了解&#xff0c;HarmonyOS NEXT开发者预览…
阅读更多...
豪越HYDO智能运维助力智慧医院信息化建设

豪越HYDO智能运维助力智慧医院信息化建设

随着国家政策的推动与支持&#xff0c;医疗行业信息化应用不断普及&#xff0c;大数据、AI、医疗物联网等技术的应用&#xff0c;快速推动了电子病历、智慧服务、智慧管理的智慧医院建设和医院信息标准化建设&#xff0c;通过不断探索创新“智慧医院”服务模式&#xff0c;实现…
阅读更多...
FLatten Transformer 简化版Transformer

FLatten Transformer 简化版Transformer

今天在找论文时&#xff0c;看到一篇比较新奇的论文&#xff0c;在这里跟大家分享一下&#xff0c;希望可以给一些人提供一些思路。虽然现在Transformer 比较火&#xff0c;在分割上面也应用的比较多&#xff0c;但是我一直不喜欢用&#xff0c;其中一个原因是结构太复杂了&…
阅读更多...
Linux平台下搭建GB28181服务器(WVP+ZLMediakit)

Linux平台下搭建GB28181服务器(WVP+ZLMediakit)

文章目录 什么是GB28181平台依赖项搭建步骤配置Redis和MySQL配置ZLMediakit配置WVP 使用效果封装成Docker镜像 什么是GB28181 GB28181(国标28181)&#xff0c;全称为《中华人民共和国公共安全视频监控联网系统技术要求》&#xff0c;是中国国家标准委员会发布的一个针对公共安…
阅读更多...
LeetCode面向运气之Javascript—第121题-买卖股票的最佳时机-97.77%

LeetCode面向运气之Javascript—第121题-买卖股票的最佳时机-97.77%

LeetCode第121题-买卖股票的最佳时机 题目要求 给定一个数组prices &#xff0c;它的第i个元素prices[i]表示一支给定股票第i天的价格。 你只能选择某一天买入这只股票&#xff0c;并选择在未来的某一个不同的日子卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023