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

news2024/12/23 17:23:28

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

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

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

在这里插入图片描述


// Element-plus 自提供的代码：
// 此时是使用了 ts 语言环境，但是我在实际项目中并没有使用 ts 语言和环境；

<template>
  <el-form
    ref="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-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)"
        >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) return
      ruleFormRef.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) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.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) => {
  debugger
  if (!val) return
  val.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) return
  ruleFormRef.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-form
        ref="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) => {
  debugger
  if (!val) return
  val.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) return
  ruleFormRef.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-form
        ref="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.coloradmin.cn/o/866319.html

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

相关文章

(JS逆向专栏十四)某游平台网站登入SHA1

(JS逆向专栏十四)某游平台网站登入SHA1

声明: 本文章中所有内容仅供学习交流&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff0c;若有侵权&#xff0c;请联系我立即删除&#xff01; 名称:逗游 目标:登入参数 加密类型:SHA1 目标网址:https://www.doyo.cn/passport/l…
阅读更多...
HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具

HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具

公文一键排版系统基本完成&#xff0c;准备继续完善SysInfo&#xff0c;增加用户帐户信息&#xff0c;其中涉及到Win32_Account结构&#xff0c;其C定义如下&#xff1a; [Dynamic, Provider("CIMWin32"), UUID("{8502C4CC-5FBB-11D2-AAC1-006008C78BC7}"…
阅读更多...
SpringBoot整合、SpringBoot与异步任务

SpringBoot整合、SpringBoot与异步任务

目录 一、背景描述二、简单使用方法三、原理五、使用自定义线程池六、Async失效情况 一、背景描述 java 的代码是同步顺序执行&#xff0c;当我们需要执行异步操作时我们通常会去创建一个新线程去执行。比如new Thread()。start()&#xff0c;或者使用线程池线程池 new Thread…
阅读更多...
Rust 编程小技巧摘选(6)

Rust 编程小技巧摘选(6)

目录 Rust 编程小技巧(6) 1. 打印字符串 2. 重复打印字串 3. 自定义函数 4. 遍历动态数组 5. 遍历二维数组 6. 同时遍历索引和值 7. 检查数组是否包含某个值 8. 二维矩阵中查找某个值 附&#xff1a;迭代器方法的区别 Rust 编程小技巧(6) 1. 打印字符串 fn main() …
阅读更多...
案例10 Maven入门案例

案例10 Maven入门案例

基于Maven构建快速构建项目&#xff0c;输出“Hello World&#xff01;”。 1.选择Maven快速构建项目 ​2.设置Maven项目信息 ​3.设置Maven环境信息 ​4.项目结构 ​ 5.Maven操作 ​6.执行结果
阅读更多...
Android图形-合成与显示-SurfaceTestDemo

Android图形-合成与显示-SurfaceTestDemo

目录 引言&#xff1a; 主程序代码&#xff1a; 结果呈现&#xff1a; 小结&#xff1a; 引言&#xff1a; 通过一个最简单的测试程序直观Android系统的native层Surface的渲染显示过程。 主程序代码&#xff1a; #include <cutils/memory.h> #include <utils/L…
阅读更多...
vue左右div结构手动拉伸并且echarts图表根据拉伸宽高自适应

vue左右div结构手动拉伸并且echarts图表根据拉伸宽高自适应

需求&#xff1a; 左右结构的div&#xff0c;可以根据数据抬起按下进行拉伸修改容器宽度的操作给左右结构某一图表设置拉伸自适应左右结构都设置个最小宽度&#xff0c;只能到一定区域内拉伸解决echarts的bug&#xff08;重复加载chart实例&#xff09;&#xff1a;[ECharts] …
阅读更多...
数据通信——VRRP

数据通信——VRRP

引言 之前把实验做了&#xff0c;结果发现我好像没有写过VRRP的文章&#xff0c;连笔记都没记过。可能是因为对STP的记忆&#xff0c;导致现在都没忘太多。 一&#xff0c;什么是VRRP VRRP全名是虚拟路由冗余协议&#xff0c;虚拟路由&#xff0c;看名字就知道这是运行在三层接…
阅读更多...
python接口自动化测试框架2.0，让你像Postman一样编写测试用例，支持多环境切换、多业务依赖、数据库断言等

python接口自动化测试框架2.0，让你像Postman一样编写测试用例，支持多环境切换、多业务依赖、数据库断言等

项目介绍 接口自动化测试项目2.0 软件架构 本框架主要是基于 Python unittest ddt HTMLTestRunner log excel mysql 企业微信通知 Jenkins 实现的接口自动化框架。 前言 公司突然要求你做自动化&#xff0c;但是没有代码基础不知道怎么做&#xff1f;或者有自动化…
阅读更多...
Fairy下载和使用

Fairy下载和使用

写在最前&#xff1a;本系列中将会涉及到 Unity&#xff0c;C#&#xff0c;Lua和FairyGUI&#xff08;FGUI&#xff09;。 FairyGUI介绍 官网&#xff1a; FairyGUI 编辑器下载&#xff1a; FairyGUI 截至文档记录最新版&#xff1a; https://res.fairygui.com/FairyGUI-Ed…
阅读更多...
Exams/ece241 2013 q4

Exams/ece241 2013 q4

蓄水池问题 S3 S2 S1 例如&#xff1a;000 代表 无水 &#xff0c;需要使FR3, FR2, FR1 都打开&#xff08;111&#xff09; S3 S2 S1 FR3 FR2 FR1 000 111 001 011 011 001 111 000 fr代表水变深为…
阅读更多...
Eleastisearch5.2.2利用镜像迁移构建实例后ES非健康状态

Eleastisearch5.2.2利用镜像迁移构建实例后ES非健康状态

正常迁移完成后启动服务&#xff0c;查看ES非健康状态 此时观察ES集群状态&#xff1a;curl -XGET -u elastic:xxx localhost:9200/_cluster/health?pretty 注意到"active_shards_percent_as_number" : 88.8888 该项的值不产生变化;集群状态"status" : “…
阅读更多...
LAXCUS如何通过技术创新管理数千台服务器

LAXCUS如何通过技术创新管理数千台服务器

随着互联网技术的不断发展&#xff0c;服务器已经成为企业和个人获取信息、进行计算和存储的重要工具。然而&#xff0c;随着服务器数量的不断增加&#xff0c;传统的服务器管理和运维方式已经无法满足现代企业的需求。LAXCUS做为专注服务器集群的【数存算管】一体化平台&#…
阅读更多...
计算机网络 网络层 边界网关协议BGP

计算机网络 网络层 边界网关协议BGP

阅读更多...
JVM—内存管理（运行时数据区）、垃圾回收

JVM—内存管理（运行时数据区）、垃圾回收

背景介绍 当JVM类加载器加载完字节码文件之后&#xff0c;会交给执行引擎执行&#xff0c;在执行的过程中会有一块JVM内存区域来存放程序运行过程中的数据&#xff0c;也就是我们图中放的运行时数据区&#xff0c;那这一块运行时数据区究竟帮我们做了哪些工作&#xff1f;我们…
阅读更多...
【学习FreeRTOS】第6章——FreeRTOS中断管理

【学习FreeRTOS】第6章——FreeRTOS中断管理

【本篇文章的也可参考STM32中断文章http://t.csdn.cn/foF9I&#xff0c;结合着学习效果更好】 1.什么是中断 中断&#xff1a;让CPU打断正常运行的程序&#xff0c;转而去处理紧急的事件&#xff08;程序&#xff09;&#xff0c;就叫中断中断执行机制&#xff0c;可简单概括…
阅读更多...
Nginx配置文件理解

Nginx配置文件理解

之前除了一篇nginx基础安装和基础使用的文章&#xff0c;由于长时间不使用nginx 了&#xff0c;再写一篇文章加强一下对nginx 的理解&#xff1b;当然更深入细致的理解最好去官网细致学习一下&#xff0c;并配和实践多多练习才是最好的&#xff1b; nginx常用的特性&#xff1a…
阅读更多...
使用GUI Guider工具在MCU上开发嵌入式GUI应用 (1) - GUI Guider简介及安装

使用GUI Guider工具在MCU上开发嵌入式GUI应用 (1) - GUI Guider简介及安装

使用GUI Guider工具在MCU上开发嵌入式GUI应用 (1) - GUI Guider简介及安装 受限于每篇文章最多只能贴9张图的限制&#xff0c;这个教程被拆分成了多篇文章连载发布&#xff0c;完整目录结构如下图x所示。后续会发布完整教程的pdf文件&#xff0c;敬请期待。 图x 完整教程文档…
阅读更多...
QGIS二次开发六：VS不借助QT插件创建UI界面

QGIS二次开发六：VS不借助QT插件创建UI界面

上一篇博客我们说了在VS中如何使用QT插件来创建UI界面&#xff0c;但是我们二次开发QGIS的第一篇博客就说了&#xff0c;最好使用OSGeo4W中自动下载的QT进行QGIS二次开发&#xff0c;这样兼容性是最好的&#xff0c;那么该如何在VS中不使用外部安装的QT以及QT的VS插件情况下进行…
阅读更多...
解决ElementUI动态表单校验验证不通过

解决ElementUI动态表单校验验证不通过

这里记录一下&#xff0c;写项目时遇到的一个问题&#xff1a;就是动态渲染的表单项&#xff0c;加验证规则后一直不通过&#xff01;&#xff01;&#xff01; 原代码 html部分&#xff1a; <el-form-itemv-for"(teaclass,index) in addFom.classIds":label&quo…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023