表单验证:输入的字符串以回车分隔并验证是否有

news2024/7/6 18:29:15

公司项目开发时,有一个需求,需要对输入的字符串按回车分隔并验证是否有重复项,效果如下:

 表单代码:

  <el-form-item label="IP地址条目:" prop="ipAddressEntry">
      <el-input
          type="textarea"
          v-model="formData.ipAddressEntry"
          :rows="5"
      ></el-input>
  </el-form-item>

表单验证代码:

 data() {
    let isRepeat = (rule, value, callback) => {
      if (this.formData.ipAddressEntry != ''){
        const arr = this.formData.ipAddressEntry.split('\n');
        const set = new Set(arr);

        if (arr.length === set.size) {
          callback()
        } else {
          callback('输入IP地址重复')
        }
      }
    }
    return{
      rules: {
        ipAddressEntry: [
          {
            required: true,
            message: '请填写',
            trigger: 'blur',
          },
          { trigger: 'blur', validator: isRepeat },
        ],
      }
    }
}

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

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

相关文章

基于深度神经网络的肺炎检测系统实现

一、说在前面 使用AI进行新冠肺炎图像诊断可以加快病例的诊断速度&#xff0c;提高诊断的准确性&#xff0c;并在大规模筛查中发挥重要作用&#xff0c;从而更好地控制和管理这一流行病。然而&#xff0c;需要强调的是&#xff0c;AI技术仅作为辅助手段&#xff0c;最终的诊断决…

vue3时间插件——Moment.js使用

在日期时间这一块在js中是有体现的&#xff0c;但是用起来不是特别方便&#xff0c;尤其是在vue框架中&#xff0c;我们也不可能去那样使用&#xff0c;显得很笨拙麻烦&#xff0c;所以给大家这次带来一个好用的时间插件&#xff0c;就是Moment时间插件&#xff0c;很小巧&…

vue3+ts+element-plus 之使用node.js对接mysql进行表格数据展示

vue3tselement-plus axiosnode.jsmysql开发管理系统之表格展示 ✏️ 1. 新建一个node项目* 初始化node* 安装可能用到的依赖* 配置文件目录* 添加路由router1. 添加router.js文件&#xff0c;添加一个test目录2. 修改app.js ,引入router&#x1f4d2; 3. 启动并在浏览器打开 * …

【C++】再谈模板,深入理解C++模板

深入理解C模板 typename和class的区别非类型模板参数模板的特化函数模板特化类模板特化全特化偏特化 模板分离编译模板的分离编译解决方法 总结&#x1f340;小结&#x1f340; &#x1f389;博客主页&#xff1a;小智_x0___0x_ &#x1f389;欢迎关注&#xff1a;&#x1f44d…

Linux---详解进程信号

进程信号 &#x1f373;信号理解&#x1f9c8;什么是信号&#xff1f;&#x1f95e;进程信号&#x1f953;查看系统信号&#x1f969;在技术角度理解信号&#x1f357;注意 &#x1f356;信号处理&#x1f9c7;信号异步机制 &#x1f354;信号产生&#x1f35f;通过终端按键产生…

解决VScode下载太慢的问题记录

最近突然想重新下载vscoded便携免安装版&#xff0c;发现下载很慢&#xff0c;于是乎查询一下&#xff0c;以便记录 下载地址 VScode官方网站&#xff1a; https://code.visualstudio.com/ 根据个人的需求选择下载&#xff0c;页面加载下载需要等一会&#xff0c; 然后就会…

Oracle输出文本平面(CSV、XML)文本数据详细过程

此过程是提供给前端,调用的接口,为报表提供”下载“功能。以下是本人在测试环境的测试,有什么不足的地方,请留言指教,谢谢。 1、测试表 分别对测试表输出csv、xml两种格式文件数据。前期的准备工作。 --在服务器端创建directory,用管理员用户 create or replace directo…

Python系列学习第二章-Python语言基本语法元素

hello&#xff0c;这里是Token_w的文章&#xff0c;主要讲解python的基础学习&#xff0c;希望对大家有所帮助 整理不易&#xff0c;感觉还不错的可以点赞收藏评论支持&#xff0c;感谢&#xff01; Python程序说它可以倒背如流&#xff0c;人类的你要不要默写一下保留字来试试…

Android 之 Paint API —— ColorFilter (颜色过滤器) (2-3)

本节引言&#xff1a; 上一节中我们讲解了Android中Paint API中的ColorFilter(颜色过滤器)的第一个子类&#xff1a; ColorMatrixColorFilter(颜色矩阵颜色过滤器)&#xff0c;相信又开阔了大家的Android图像处理视野&#xff0c; 而本节我们来研究它的第二个子类&#xff1a;L…

h5百度地图聚合---切换tab时,聚合不能清除

项目&#xff1a;taro3vue3 描述&#xff1a;切换tab的时候用map.clearOverlays清除&#xff0c;但是地图缩放下聚合又出现了 解决&#xff1a;地图组件监听makers的时候 if (oldVal.length) {map.clearOverlays()markerClusterer.clearMarkers() }

数仓学习---13、报表数据导出

星光下的赶路人star的个人主页 莫见长安行乐处&#xff0c;空令岁月易蹉跎 文章目录 一、报表数据导出1.1 MySQL建库建表1.1.1 创建数据库1.1.2 创建表 1.2 数据导出1.2.1 DataX配置文件生成脚本1.2.2 编写每日导出脚本 一、报表数据导出 为方便报表应用使用数据&#xff0c;需…

解决 cannot execute binary file: Exec format error

问题&#xff1a;cannot execute binary file: Exec format error 解决 cannot execute binary file: Exec format error 原因&#xff1a; "cannot execute binary file: Exec format error" 错误通常发生在尝试执行一个不兼容的二进制文件时。这可能是因为你正在…

python中使用cProfile可视化并解决性能瓶颈问题

大家好&#xff0c;帕累托法则讲到&#xff1a;“在大多数情况下&#xff0c;80%的结果来自于20%的原因。”作为一名程序员&#xff0c;当代码运行速度不尽如人意时&#xff0c;就需要花费大量时间对代码进行相应的重构&#xff0c;但在许多情况下&#xff0c;所得到的速度提升…

【Python入门系列】第十八篇:Python自然语言处理和文本挖掘

文章目录 前言一、Python常用的NLP和文本挖掘库二、Python自然语言处理和文本挖掘1、文本预处理和词频统计2、文本分类3、命名实体识别4、情感分析5、词性标注6、文本相似度计算 总结 前言 Python自然语言处理&#xff08;Natural Language Processing&#xff0c;简称NLP&…

吴恩达ChatGPT《LangChain Chat with Your Data》笔记

文章目录 1. Introduction2. Document Loading2.1 Retrieval Augmented Generation&#xff08;RAG&#xff09;2.2 Load PDFs2.3 Load YouTube2.4 Load URLs2.5 Load Notion 3. Document Splitting3.1 Splitter Flow3.2 Character Splitter3.3 Token Splitter3.4 Markdown Spl…

如何在3ds max中创建可用于真人场景的巨型机器人:第 3 部分

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 1. 创建腿部装备 步骤 1 打开 3ds Max。 打开在本教程最后一部分中保存的文件。 打开 3ds Max 步骤 2 转到创建> 系统并单击骨骼。 创建>系统 步骤 3 为的 侧视口中的腿&#xff0c;如下图所示…

【C++】开源:Linux端ALSA音频处理库

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍Linux端ALSA音频处理库。 无专精则不能成&#xff0c;无涉猎则不能通。。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c…

12.(开发工具篇vscode+git)vscode 不能识别npm命令

1&#xff1a;vscode 不能识别npm命令 问题描述&#xff1a; 解决方式&#xff1a; &#xff08;1&#xff09;右击VSCode图标&#xff0c;选择以管理员身份运行&#xff1b; &#xff08;2&#xff09;在终端中执行get-ExecutionPolicy&#xff0c;显示Restricted&#xff…

vue2项目迁移到vue3中的改动——基础积累

最近在跟着大神学习vue3的内容&#xff0c;发现之前vue2写的代码可以直接照搬到vue3中&#xff0c;但是有一些需要改动的内容&#xff0c;下面做一下记录。 1.定义对象时&#xff0c;需要指定每个属性值 例如&#xff1a;listQuery:{} 如果使用&#xff1a;listQuery.Filter…

vue3+elementplus后台管理系统,实现侧边栏菜单显示到主内容区域

目录 1 创建页面2 设置路由3 修改首页4 首页的完整代码总结 我们已经使用vue3和elmentplus初步搭建了首页&#xff0c;上一篇中有个问题没解决&#xff0c;就是在侧边栏导航功能里&#xff0c;如果点击菜单希望是在首页打开页面而不是跳转到新页面。以下是我们希望实现的效果 这…