某j 全局控制输入框不能输入表情符

在FormItem.vue文件中的function handleRules()添加两处表情正则校验,代码如下

效果:

 function handleRules(): ValidationRule[] {const { rules: defRules = [], component, rulesMessageJoinLabel, label, dynamicRules, required } = props.schema;if (isFunction(dynamicRules)) {const noEmoRule = dynamicRules(unref(getValues))noEmoRule.push( {required: false,validator: (_, value) => {const emojiRegex = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi;if (emojiRegex.test(value)) {return Promise.reject("不能输入表情符号!");}return Promise.resolve();}})return noEmoRule as ValidationRule[];}let rules: ValidationRule[] = cloneDeep(defRules) as ValidationRule[];const { rulesMessageJoinLabel: globalRulesMessageJoinLabel } = props.formProps;const joinLabel = Reflect.has(props.schema, "rulesMessageJoinLabel") ? rulesMessageJoinLabel : globalRulesMessageJoinLabel;const defaultMsg = createPlaceholderMessage(component) + `${joinLabel ? label : ""}`;function validator(rule: any, value: any) {const msg = rule.message || defaultMsg;if (value === undefined || isNull(value)) {// 空值return Promise.reject(msg);} else if (Array.isArray(value) && value.length === 0) {// 数组类型return Promise.reject(msg);} else if (typeof value === "string" && value.trim() === "") {// 空字符串return Promise.reject(msg);} else if (typeof value === "object" && Reflect.has(value, "checked") && Reflect.has(value, "halfChecked") && Array.isArray(value.checked) && Array.isArray(value.halfChecked) && value.checked.length === 0 && value.halfChecked.length === 0) {// 非关联选择的tree组件return Promise.reject(msg);}return Promise.resolve();}const getRequired = isFunction(required) ? required(unref(getValues)) : required;if ((!rules || rules.length === 0) && getRequired) {rules = [{ required: getRequired, validator }];}const requiredRuleIndex: number = rules.findIndex((rule) => Reflect.has(rule, "required") && !Reflect.has(rule, "validator"));if (requiredRuleIndex !== -1) {const rule = rules[requiredRuleIndex];const { isShow } = getShow();if (!isShow) {rule.required = false;}if (component) {//update-begin---author:wangshuai---date:2024-02-01---for:【QQYUN-8176】编辑表单中,校验必填时,如果组件是ApiSelect,打开编辑页面时,即使该字段有值,也会提示请选择---//https://github.com/vbenjs/vue-vben-admin/pull/3082 github修复原文/*if (!Reflect.has(rule, 'type')) {rule.type = component === 'InputNumber' ? 'number' : 'string';}*///update-end---author:wangshuai---date:2024-02-01---for:【QQYUN-8176】编辑表单中,校验必填时,如果组件是ApiSelect,打开编辑页面时,即使该字段有值,也会提示请选择---rule.message = rule.message || defaultMsg;if (component.includes("Input") || component.includes("Textarea")) {rule.whitespace = true;}const valueFormat = unref(getComponentsProps)?.valueFormat;setComponentRuleType(rule, component, valueFormat);}}// Maximum input length rule checkconst characterInx = rules.findIndex((val) => val.max);if (characterInx !== -1 && !rules[characterInx].validator) {rules[characterInx].message = rules[characterInx].message || t("component.form.maxTip", [rules[characterInx].max] as Recordable);}// update-begin--author:liaozhiyang---date:20241226---for:【QQYUN-7495】pattern由字符串改成正则传递给antd(因使用InputNumber时发现正则无效)rules.forEach((item) => {if (typeof item.pattern === "string") {try {const reg = new Function("item", `return ${item.pattern}`)(item);if (Object.prototype.toString.call(reg) === "[object RegExp]") {item.pattern = reg;} else {item.pattern = new RegExp(item.pattern);}} catch (error) {item.pattern = new RegExp(item.pattern);}}});// update-end--author:liaozhiyang---date:20231226---for:【QQYUN-7495】pattern由字符串改成正则传递给antd(因使用InputNumber时发现正则无效)rules.push({required: false,validator: (_, value) => {const emojiRegex = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi;if (emojiRegex.test(value)) {return Promise.reject("不能输入表情符号!");}return Promise.resolve();}})return rules;}

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

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

相关文章

java中File类

1、介绍 File类定义了一些与平台无关的方法来操作文件,可以通过调用File类中的方法,实现创建、删除、重命名文件等操作。File类的对象主要用来获取文件本身的一些信息,如文件所在的目录、文件长度、文件读写权限等。数据流可以将数据写入到文…

Linux高性能服务器编程 | 读书笔记 | 10. 高性能I/O框架库Libevent

10. 高性能I/O框架库Libevent Linux服务器程序必须处理三类事件(I/O、信号和定时事件),在处理这三类事件时需要考虑以下问题: **统一事件源。**统一处理这三类事件既能使代码简单易懂,又能避免一些潜在的逻辑错误。实…

Javaweb web后端maven介绍作用安装

自动导入到这个项目 src是源代码 main主程序,核心代码 java是Java源代码 resources是项目配置文件 test测试相关的 maven概述 介绍 依赖在本地仓库查找,如果本地仓库有,用本地仓库的依赖,本地没有,连接中央仓库&…

云计算HCIP-OpenStack01

1.OpenStack是什么? 1.1OpenStack是虚拟机、裸金属、容器的云基础架构 虚拟机、裸金属、容器,三者的相同点在于他们都是计算资源的封装,其所需要的资源是高度重合的。同时,这三类资源都属于是最基础的计算资源,也是云或…

Ubuntu基础命令

1、重置密码及启用/禁用用户 sudo passwd root 在Ubuntu中禁用root用户,使用以下命令: sudo passwd -l root 在Ubuntu中禁用root帐户 sudo passwd root 在Ubuntu中启用root帐户 在Ubuntu中锁定账户 usermod -L username 在Ubuntu中解锁…

wazuh-modules-sca-scan

sca模块主函数wm_sca_main -> wm_sca_start 检查policy文件中的每一个项目wm_sca_check_policy static int wm_sca_check_policy(const cJSON * const policy, const cJSON * const checks, OSHash *global_check_list) {if(!policy) {return 1;}const cJSON * const id c…

python —— 常用命令行的命令

目 录 python命令行查看安装版本查看安装路径升级pip工具安装包升级包卸载安装包查看包的信息详情查询已安装的包查询可升级的包显示包所在目录及信息搜索包使用指定版本运行脚本运行常见错误 python命令行 产品研发中通常需要使用一些小工具来辅助调试功能,比如采…

基于单片机的智能窗帘(论文+源码)

1.系统设计 本课题智能窗帘系统的设计主要包括STM32单片机主控模块,光照检测模块,窗帘控制模块,键盘控制模块,显示模块和时钟模块等几个部分。总体设计框图如图2.1所示,其可以实现对当前光照强度的实时检测&#xff0…

21 go语言(golang) - gin框架安装及使用(二)

四、组成 前面的文章中,我们介绍了其中一部分组成,接下来继续学习: Router(路由器) Gin 使用基于树结构的路由机制来处理 HTTP 请求。它支持动态路由参数、分组路由以及中间件。路由器负责将请求路径映射到相应的处理…

Fastdfs V6.12.1集群部署(arm/x86均可用)

文章目录 一、 Fastdfs 介绍二、部署 信息三、步骤tracker/storage 机器的 compose 内容storage 机器的 composetracker 与 storage 启动目录层级与配置文件测试测试集群扩容与缩减注意事项 一、 Fastdfs 介绍 FastDFS 是一款高性能的分布式文件系统,特别适合用于存…

零基础开始学习鸿蒙开发-基础页面的设计

目录 1.样例图 2.逐项分析 2.1 头顶布局分析:首先我们要把第一行的图标绘制出来,一个左一个右,很明显,需要放在一个Row容器中,具体代码如下: 2.2 和头像同一行的布局,需要注意的是&#xff0c…

如何用细节提升用户体验?

前端给用户反馈是提升用户体验的重要部分,根据场景选择不同的方式可以有效地提升产品的易用性和用户满意度。以下是常见的方法: 1. 视觉反馈 用户执行了某些操作后,需要即时确认操作结果。例如:按钮点击、数据提交、页面加载等。…

[数据结构#2] 图(1) | 概念 | 邻接矩阵 | 邻接表 | 模拟

图是由顶点集合及顶点间的关系(边)组成的数据结构,可用 G ( V , E ) G(V,E) G(V,E)表示,其中: 顶点集合 V V V: V { x ∣ x ∈ 某数据对象集 } V\{x|x\in\text{某数据对象集}\} V{x∣x∈某数据对象集},…

rpc设计的再次思考20251215(以xdb为核心构建游戏框架)

1.服务提供者注册的方式 // 表明这是一个服务提供者,ServerType 和 ServerId从application.properties中读取 // 而且只有当当前服务是Game时,才生效。 或者 条件注解??? RpcProvider(typeServerType.Game) public class GameProvider{MsgReceiver…

学习maven(maven 项目模块化,继承,聚合)

前言 本篇博客的核心:理解maven 项目模块化,继承,聚合 的含义 maven 项目模块化 含义 maven项目模块化:使用maven 构建项目,管理项目的方式,我们可以将maven项目根据内在的关系拆分成很多个小项目【模块】…

【OJ题解】最长回文子串

个人主页: 起名字真南的CSDN博客 个人专栏: 【数据结构初阶】 📘 基础数据结构【C语言】 💻 C语言编程技巧【C】 🚀 进阶C【OJ题解】 📝 题解精讲 目录 **题目链接****解题思路****1. 初步判断****2. 回文子串性质****3. 判断是…

EMQX 可观测性最佳实践

EMQX 介绍 EMQX 是一款开源、高度可伸缩、高可用的分布式 MQTT 消息服务器,同时也支持 CoAP/LwM2M 等一站式 IoT 协议接入。以下是 EMQX 的一些主要特点和功能: 海量连接与高并发:EMQX 能够处理千万级别的并发客户端,支持大规模…

kubeadm_k8s_v1.31高可用部署教程

kubeadm_k8s_v1.31高可用部署教程 实验环境部署拓扑图**署架构方案****Load Balance****Control plane node****Worker node****资源分配(8台虚拟机)**集群列表 前置准备关闭swap开启ipv4转发更多设置 1、Verify the MAC address and product_uuid are u…

mysql flink cdc 实时数据抓取

背景 通过监控mysql日志,获取表字段更新,用来做实时展示。 使用技术:Flink CDC Flink CDC 基于数据库日志的 Change Data Caputre 技术,实现了全量和增量的一体化读取能力,并借助 Flink 优秀的管道能力和丰富的上下游…

element plus el-select修改后缀图标

<el-selectv-model"value"placeholder"请选择工点"size"large":teleported"false":suffix-icon"CaretBottom"style"width: 100px"><el-optionv-for"item in options":key"item.value&quo…