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

Ⅰ、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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

ELK中grok插件、mutate插件、multiline插件、date插件的相关配置

ELK中grok插件、mutate插件、multiline插件、date插件的相关配置

目录 一、grok 正则捕获插件 自定义表达式调用 二、mutate 数据修改插件 示例&#xff1a; ●将字段old_field重命名为new_field ●添加字段 ●将字段删除 ●将filedName1字段数据类型转换成string类型&#xff0c;filedName2字段数据类型转换成float类型 ●将filedNam…
阅读更多...
【移动机器人运动规划】04 ——轨迹生成

【移动机器人运动规划】04 ——轨迹生成

文章目录 前言相关代码整理: 介绍Minimum Snap OptimizationDifferential Flatness(微分平坦)Minimum-snapSmooth 1D TrajectorySmooth Multi-Segment TrajectoryOptimization-based Trajectory Generation Convex Optimization&#xff08;凸优化&#xff09;凸函数和凸集凸优…
阅读更多...
List list=new ArrayList()抛出的ArrayIndexOutOfBoundsException异常

List list=new ArrayList()抛出的ArrayIndexOutOfBoundsException异常

1.应用场景&#xff0c;今天生产日志监控到一组new ArrayList() 进行add 异常&#xff0c;具体日志如下&#xff1a; eptionHandler.handler(178): TXXYBUSSINESS|执行异常 java.util.concurrent.CompletionException: java.lang.ArrayIndexOutOfBoundsException: Index 1 out…
阅读更多...
SpringBoot禁用Swagger3

SpringBoot禁用Swagger3

Swagger3默认是启用的&#xff0c;即引入包就启用。 <dependency><groupId>io.springfox</groupId><artifactId>springfox-boot-starter</artifactId><version>3.0.0</version> </dependency> <dependency><groupId…
阅读更多...
理解-面向对象

理解-面向对象

目录 对象&#xff1a; 举例&#xff1a; 封装: 好处: 继承: 多态&#xff1a; 类和对象之间的关系 对象&#xff1a; 把一个东西看成对象&#xff0c;我们就可以孤立的审查它的性质&#xff0c;行为&#xff0c;进而研究它和其他对象的关系。 对象是一个应用系统中用…
阅读更多...
Spring5 AOP 默认使用 JDK

Spring5 AOP 默认使用 JDK

这是博主在使用dubbo实现远程过程调用的时候遇到的问题&#xff1a; 我们如果在服务提供者类上加入Transactional事务控制注解后&#xff0c;服务就发布不成功了。原因是事务控制的底层原理是为服务提供者类创建代理对象&#xff0c;而默认情况下Spring是基于JDK动态代理方式创…
阅读更多...
ssh-keygen 做好免密登录后不生效

ssh-keygen 做好免密登录后不生效

免密说明 通常情况下&#xff0c;我们ssh到其他服务器需要知道服务器的用户名和密码。对于需要经常登录的服务器每次都输入密码比较麻烦&#xff0c;因此我们可以在两台服务器上做免密登录&#xff0c;即在A服务器可以免密登录B服务器。 在A服务器上登录B服务器时&#xff0c;…
阅读更多...
数字图像处理 --- 相机的内参与外参（CV学习笔记）

数字图像处理 --- 相机的内参与外参（CV学习笔记）

Pinhole Camera Model&#xff08;针孔相机模型&#xff09; 针孔相机是一种没有镜头、只有一个小光圈的简单相机。 光线穿过光圈并在相机的另一侧呈现倒立的图像。为了建模方便&#xff0c;我们可以把物理成像平面(image plane)上的图像移到实际场景(3D object)和焦点(focal p…
阅读更多...
Spring-2-透彻理解Spring 注解方式创建Bean--IOC

Spring-2-透彻理解Spring 注解方式创建Bean--IOC

今日目标 学习使用XML配置第三方Bean 掌握纯注解开发定义Bean对象 掌握纯注解开发IOC模式 1. 第三方资源配置管理 说明&#xff1a;以管理DataSource连接池对象为例讲解第三方资源配置管理 1.1 XML管理Druid连接池(第三方Bean)对象【重点】 数据库准备 -- 创建数据库 create …
阅读更多...
Python基础小项目

Python基础小项目

今天给大家写一期特别基础的Python小项目&#xff0c;欢迎大家支持&#xff0c;并给出自己的完善修改 &#xff08;因为我写的都是很基础的&#xff0c;运行速率不是很好的 目录 1. 地铁票价题目程序源码运行截图 2. 购物车题目程序源码运行截图 3. 名片管理器题目程序源码运行…
阅读更多...
opencv实战项目 实现手势跟踪并返回位置信息（封装调用）

opencv实战项目 实现手势跟踪并返回位置信息（封装调用）

OpenCV 是一个基于 Apache2.0 许可&#xff08;开源&#xff09;发行的跨平台计算机视觉和机器学习软件库&#xff0c;可以运行在Linux、Windows、Android和Mac OS操作系统上。 需要提前准备opencv 和 mediapipe库 pip --default-timeout5000 install -i https://pypi.tuna.tsi…
阅读更多...
nodejs+vue+elementui社区流浪猫狗救助救援网站_4a4i2

nodejs+vue+elementui社区流浪猫狗救助救援网站_4a4i2

基于此背景&#xff0c;本研究结合管理员即时发布流浪猫狗救助救援信息与用户的需求&#xff0c;设计并实现了流浪猫狗救助救援网站。系统采用B/S架构&#xff0c;java语言作为主要开发语言&#xff0c;MySQL技术创建和管理数据库。系统主要分为管理员和用户两大功能模块。通过…
阅读更多...
【Linux取经路】进程的奥秘

【Linux取经路】进程的奥秘

文章目录 1、什么是进程&#xff1f;1.1 自己写一个进程 2、操作系统如何管理进程&#xff1f;2.1 描述进程-PCB2.2 组织进程2.3 深入理解进程 3、Linux环境下的进程3.1 task_struct3.2 task_struct内容分类3.3 组织进程3.4 查看进程属性 4、结语 1、什么是进程&#xff1f; 在…
阅读更多...
FreeRTOS

FreeRTOS

FreeRTOS官网&#xff1a;www.freertos.org 调度 实时操作系统 特点&#xff1a;如果有一个任务需要执行&#xff0c;实时操作系统会马上&#xff08;在较短时间内&#xff09;执行该任务&#xff0c;不会有较长的延时。这种特性保证了各个任务的及时执行。 实现方式&#…
阅读更多...
web前端之CSS操作

web前端之CSS操作

文章目录 一、CSS操作1.1 html元素的style属性1.2 元素节点的style属性1.3 cssText属性 二、事件2.1 事件处理程序2.1.1 html事件2.1.2 DOM0事件&#xff08;适合单个事件&#xff09;2.1.3 DOM2事件&#xff08;适合多个事件&#xff09; 2.2 事件之鼠标事件2.3 事件之Event事…
阅读更多...
详解Kafka分区机制原理｜Kafka 系列 二

详解Kafka分区机制原理｜Kafka 系列 二

Kafka 系列第二篇&#xff0c;详解分区机制原理。为了不错过更新&#xff0c;请大家将本号“设为星标”。 点击上方“后端开发技术”&#xff0c;选择“设为星标” &#xff0c;优质资源及时送达 上一篇文章介绍了 Kafka 的基本概念和术语&#xff0c;里面有个概念是 分区(Part…
阅读更多...
计算机竞赛 opencv python 深度学习垃圾图像分类系统

计算机竞赛 opencv python 深度学习垃圾图像分类系统

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; opencv python 深度学习垃圾分类系统 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;4分 这是一个较为新颖的竞…
阅读更多...
pytest结合 allure 打标记之的详细使用

pytest结合 allure 打标记之的详细使用

前言 前面我们提到使用allure 可以生成漂亮的测试报告&#xff0c;下面就Allure 标记我们做详细介绍。 allure 标记 包含&#xff1a;epic&#xff0c;feature, story, title, testcase, issue, description, step, serverity, link, attachment 常用的标记 allure.feature…
阅读更多...
Mysql中如果建立了索引，索引所占的空间随着数据量增长而变大，这样无论写入还是查询，性能都会有所下降，怎么处理？

Mysql中如果建立了索引，索引所占的空间随着数据量增长而变大，这样无论写入还是查询，性能都会有所下降，怎么处理？

索引所占空间的增长确实会对MySQL数据库的写入性能和查询性能造成影响&#xff0c;这主要是由于索引数据过多时会导致磁盘I/O操作变得非常频繁&#xff0c;从而使性能下降。为此&#xff0c;可以采取以下几种方式来减缓这种影响&#xff1a; 1. 限制索引的大小&#xff1a;可以…
阅读更多...
PHP8定义字符串的方法-PHP8知识详解

PHP8定义字符串的方法-PHP8知识详解

字符串&#xff0c;顾名思义&#xff0c;就是将一堆字符串联在一起。字符串简单的定义方法是使用英文单引号&#xff08; &#xff09;或英文双引号&#xff08;" "&#xff09;包含字符。另外&#xff0c;还可以使用定界符定义字符串。本文还介绍了字符串的连接符。…
阅读更多...
最新文章

Copyright @ 2022~2023