VUE3+elementPlus 之 Form表单校验器 之 字符长度校验

需求:校验字符长度,超过后仍可输入,error提示录入字符数与限制字符数

校验字符长度:

/**
 * 检验文字输入区的长度
 * @param {*} rule                输入框的rule 对象,field:字段名称
 * @param {*} value               输入框的内容
 * @param {*} callback            回调函数
 * @param {*} textLengthRules     文本长度校验规则对象, key:字段名称,value:字段允许最大长度
 * @returns
 */
export function validTextField(rule: any, value: any, callback: any, textLengthRules: any) {
  if (!value) {
    callback();
    return;
  }
  const field = rule.field;
  const arr = field.split(".");
  // 表单列表内容校验
  if (arr.length > 0) {
    const len = textLengthRules[arr[0]][arr[arr.length - 1]];
    if (value.length > len) {
      callback(new Error(`${value.length}/${len} 内容输入超出范围`));
      return;
    }
  }

  // 支持字段校验
  if (textLengthRules?.[field] && value.length > textLengthRules[field]) {
    callback(new Error(`${value.length}/${textLengthRules[field]} 内容输入超出范围`));
    return;
  }
  callback();
}

组件内使用:

const textLengthRules = {
  num: 15
};
const validTextLength = (rule: any, value: any, callback: any) => {
  validTextField(rule, value, callback, textLengthRules);
};
rules: {
	num: [{ validator: validTextLength }],
}

页面效果:
在这里插入图片描述

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

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

相关文章

【京东云新品发布月刊】2024年1月产品动态来啦

1)【莫奈可视化平台】新品上线 京东莫奈可视化平台通过自由拖拽、图形化编辑、所见即所得的方式,快速实现极致酷炫、直观清晰的视觉场景,将海量繁杂数据背后所蕴含的价值更直观、深层、全面的展现出来,辅助决策者合理决策。 2&a…

【Oracle云】OCI DevOps Services 构建自动化流水线 (1) - 基础架构流程 OCI 代码仓库使用

OCI DevOps Services 是 Oracle Cloud Infrastructure (OCI) 提供的一项独立的 CI/CD 服务,旨在支持用户构建自动化的流水线,实现更高效、可靠的软件交付。在本系列的第一篇文章中,我们将深入探讨 OCI DevOps Services 的基础架构流程&#x…

基于MATLAB实现的OFDM仿真调制解调,BPSK、QPSK、4QAM、16QAM、32QAM,加性高斯白噪声信道、TDL瑞利衰落信道

基于MATLAB实现的OFDM仿真调制解调,BPSK、QPSK、4QAM、16QAM、32QAM,加性高斯白噪声信道、TDL瑞利衰落信道 相关链接 OFDM中的帧(frame)、符号(symbol)、子载波(subcarriers)、导频…

JVM工作原理与实战(三十一):诊断内存泄漏的原因

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、诊断原因 二、MAT内存泄漏检测的原理 总结 前言 JVM作为Java程序的运行环境,其负责解释和执行字节码,管理内存,确保安全,支持多线…

网络异常案例五_SYN被丢弃

问题现象 公司同事使用的时候,反馈系统不稳定,访问的时候,有时候会出现白屏(连接超时),或者系统页面点击没有响应,过一会之后刷新系统又可以正常展示了。之前未收到过类似反馈,一直…

༺༽༾ཊ—Unity之-02-抽象工厂模式—ཏ༿༼༻

首先创建一个项目, 在这个初始界面我们需要做一些准备工作, 建基础通用文件夹, 创建一个Plane 重置后 缩放100倍 加一个颜色, 任务:使用 抽象工厂模式 创建 人物与宠物 模型, 首先资源商店下载 人物与宠物…

huggingface打不开,解决方法

解决方法 将 https://huggingface.co/hustvl/Vim-tiny替换成 https://hf-mirror.com/hustvl/Vim-tiny文章目录 解决方法摘要YoloV8改进策略:基于分层注意力的FasterViT,让YoloV8实现性能的飞跃YoloV8改进策略:InceptionNext主干替换YoloV8…

第九节HarmonyOS 常用基础组件21-ImageAnimator

1、描述 提供帧动画组件来实现逐帧播放图片的能力&#xff0c;可以配置需要播放的图片列表&#xff0c;每张图片可以配置时长。 2、接口 ImageAnimator() 3、属性 参数名 参数类型 描述 images Array<ImageFrameInfo> 设置图片帧信息集合&#xff0c;每一帧的帧…

【零基础学习CAPL】——CAN报文的发送(按下按钮同时周期性发送)

🙋‍♂️【零基础学习CAPL】系列💁‍♂️点击跳转 文章目录 1.概述2.面板创建3.系统变量创建4.CAPL实现4.1.函数展示4.2.全量报文展示5.效果1.概述 本章主要介绍使用CAPL和Panel在按下按钮时发送周期性CAN报文。 本章主要在“【零基础学习CAPL】——CAN报文的发送(配合P…

二叉树-堆应用(1)

目录 堆排序 整体思路 代码实现 Q1建大堆/小堆 Q2数据个数和下标 TopK问题 整体思路 代码实现 Q1造数据CreateData Q2建大堆/小堆 建堆的两种方法这里会用到前面的向上/向下调整/交换函数。向上调整&向下调整算法-CSDN博客 堆排序 整体思路 建堆&#xff08;直…

android远程投屏应用

客户端app地址&#xff1a;https://gitee.com/youzilzk/blue1.git 服务端地址&#xff1a;https://gitee.com/youzilzk/blue-server1.git 一。服务端部署 1.安装postgres 2.导入项目下blue.sql文件 3.修改配置application.properties和config.properties&#xff0c;其中applic…

Flask框架开发学习笔记《6》前后端不分离基础框架

Flask框架开发学习笔记《6》前后端不分离基础框架 Flask是使用python的后端&#xff0c;由于小程序需要后端开发&#xff0c;遂学习一下后端开发。 主要包含如下文件&#xff1a; static 目录中存储了图片templates 目录中存储了 html 文件utils.py 包含了 log 函数server.p…

人工智能福利站,初识人工智能,机器学习,第三课

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

备战蓝桥杯---数据结构与STL应用(优先队列的小细节)

很显然&#xff0c;我们先二分求X,对于验证&#xff0c;一开始我先想的是直接求每个的不足电量再除充电量后向上取整&#xff0c;然后判断与k的大小关系。事实上&#xff0c;如果让k很大&#xff0c;若有两只手机在下一刻多没电&#xff0c;显然上述方法得出的结论是错误的&…

Java的常见api以及异常情况-1

目录 1、什么是API &#xff1f; 2、Object类 3、equals方法 4、内存中的比较方法 5、instanceof 关键字 1、什么是API &#xff1f; 1.API(Application ProgrammingInterface,应用程序编程接口)2.Java中的API 指的就是 JDK 中提供的各种功能的 Java类&#xff0c;这些类将…

前端JavaScript篇之实现一个将多维数组展示的方法有哪些,分别是?

目录 实现一个将多维数组展示的方法有哪些&#xff0c;分别是&#xff1f;方法一&#xff1a;递归展开成一维数组方法二&#xff1a;嵌套展示结构方法三&#xff1a;ES6新增的数组扩展方法 flat()方法四&#xff1a;apply() 结合 concat() 使用以展开成一维数组方法五&#xff…

快速排序|超详细讲解|入门深入学习排序算法

快速排序介绍 快速排序(Quick Sort)使用分治法策略。 它的基本思想是&#xff1a;选择一个基准数&#xff0c;通过一趟排序将要排序的数据分割成独立的两部分&#xff1b;其中一部分的所有数据都比另外一部分的所有数据都要小。然后&#xff0c;再按此方法对这两部分数据分别进…

低密度奇偶校验码LDPC(五)——译码算法概述

一、译码算法概述 二、置信传播原理 Bayesian点兵问题 Turbo原理

【CSS3】flex布局实践篇 | 7种常见网页布局方案

1、垂直居中 垂直居中一度是前端面试时必问知识点。 目前的垂直解决方案 使用了 从负外边距 到 display:table-cell 等荒谬的奇技淫巧&#xff0c;包括全高的伪元素。这些方法是又复杂又难写。 不知道大家第一次使用flex布局做什么&#xff0c;反正我是用来做垂直居中&#xf…

2023 IoTDB Summit:华润电力技术研究院副院长郭为民《新型时序数据库在智能发电领域的应用探索与展望》...

12 月 3 日&#xff0c;2023 IoTDB 用户大会在北京成功举行&#xff0c;收获强烈反响。本次峰会汇集了超 20 位大咖嘉宾带来工业互联网行业、技术、应用方向的精彩议题&#xff0c;多位学术泰斗、企业代表、开发者&#xff0c;深度分享了工业物联网时序数据库 IoTDB 的技术创新…
最新文章