vue2中输入框校验：用户可输入一个或多个反向筛选关键词，关键词之间用英文逗号隔开，例如“V观财报,每经热评,A股资金”，最多可输入20个关键词，每个关键词包括1-4个中/英文字符

最新推荐文章于 2025-01-20 21:36:01 发布

Leung_KiChen

最新推荐文章于 2025-01-20 21:36:01 发布

阅读量598

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_56711112/article/details/128797077

本文介绍如何在Vue2中实现输入框的关键词校验功能。用户可输入1至20个由英文逗号分隔的关键词，每个关键词包含1-4个中英文字符。通过v-model绑定输入值，并利用正则表达式进行限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2中输入框校验：用户可输入一个或多个反向筛选关键词，关键词之间用英文逗号隔开，例如“V观财报,每经热评,A股资金”，最多可输入20个关键词，每个关键词包括1-4个中/英文字符
在Vue2中，可以使用v-model绑定输入框的值，并使用正则表达式限制输入的内容，例如：

正则表达式的解释：

^ 匹配输入字符串的开头
[\u4e00-\u9fa5A-Za-z] 匹配中文和英文字符（1-4个）
(,|$) 匹配逗号或者输入字符串的结尾
{0,20} 限制关键词的数量为0-20个
$ 匹配输入字符串的结尾

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Leung_KiChen

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

前端面试汇总-React

构建数字世界的感官之桥 | 分享前端工程化、动效魔法与性能之舞！

06-29

1376

React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event

最全面、最详细web前端面试题及答案总结

热门推荐

HanXiaoXi_yeal的博客

02-01

3万+

2021最全面、最详细web前端面试题及答案总结总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript

参与评论您还未登录，请先登录后发表或查看评论

高亮：单关键词、多关键词、多组多关键词，从简单到复杂实现满足多方面需求的页面关键词高亮

weixin_44244857的博客

12-26

1997

前言我的前言都是良心话，还是姑且看一下吧：别人一看这个标题，心想，“怎么又是一个老到掉牙的需求，网上一搜一大堆解决方案啦！”。没错！这个需求实在老土得不能再老土了，我真不想写这样一种需求的文章，无奈！无奈！现实的情况是我想这么旧的需求网上资料一大把一大把，虽然我知道网上资料可能有坑，但是我总不信找不到一篇好的全面的资料的。然而现实又是一次啪啪的打脸，我是没找到，而且很多资料都是一个拷贝一个，...

vue 两层输入框表单校验

weixin_44134816的博客

02-13

333

【代码】vue 两层输入框表单校验。

Vue 输入框 el-input 添加校验 oninput

MXinagr的博客

02-03

2019

在Vue项目中使用el-input输入时只允许输入特定格式的值。

element中el-input输入框校验（vue项目）

编程小白的博客

10-10

2518

【代码】element中el-input输入框校验（vue项目）

vue字符串展示不同信息用逗号分隔

qq_50280782的博客

11-25

2430

效果图原始图直接上代码 //表格数据 <el-table-column prop="fItemDetail" header-align="center" align="center" label="检测项目" width="180px"> <template slot-scope="scope"> <span&...

【正则表达式在JavaScript中的应用】：网页文本处理，交互式技巧大揭秘

![【正则表达式在JavaScript中的应用】：网页文本处理，交互式技巧大揭秘]...正则表达式作为一种强大的文本处理工具，在JavaScript编程中扮演着关键角色，广泛应用于文本验证、提取与替换以及交互

JavaWeb

chaogewudi34的博客

05-01

885

JavaWeb：前端（HTML、CSS、JS、Vue、Axios、ElementPlus）、后端（Maven、SpringMVC、Spring Framework、Mybatis、SpringBoot、JWT令牌、OSS云）

前端开发Web

最新发布

Qiuhuaian的博客

01-20

953

命令行:vue create vue-project01图形化界面:vue uiElement:是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库组件:组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等官网：https://element.eleme.cn/#/zh-CNListener。

在vue2.0中messagebox中实现input、el-input-number输入及正则表达验证功能，

weixin_42594419的博客

02-11

1176

在 Vue 2.0 中，可以通过使用第三方组件库 element-ui 的 MessageBox 组件实现带有输入框和数字输入框的消息框，并通过正则表达式实现验证功能。以下是实现这个功能的代码示例： <template> <div> <el-button @click="openMessageBox">打开输入框</el-button>...

vue中input输入框输入校检的问题

qq_56236582的博客

06-25

1229

1，输入的数据不能小于0,整数部分限制位数，小数部分限制位数，不能以0开头。首先绑定change事件，输入框发生改变时则触发，以及金额格式化。输入规则很多种限制，尤其是对金额。

vue 点击添加多个input及多个关键字

weixin_43285861的博客

11-10

2748

html <template> <div> <el-button type="primary" size="small" @click="addInput">添加</el-button> <div v-for="(item,i) of eventPlanForm.matchKeywordArray" :key="i" > <el-input type="text" v-model="keywordList[i]" place

百度竞价排名点击软件_火星下拉教你如何做百度下拉关键词

weixin_39534121的博客

12-01

1385

验证多个用逗号或者分号分隔的邮箱

weixin_45687390的博客

12-31

2014

验证多个用逗号分隔的邮箱 var reg = /^((([a-z0-9_.-]+)@([\da-z.-]+).([a-z.]{2,6},))*(([a-z0-9_.-]+)@([\da-z.-]+).([a-z.]{2,6})))$/; 验证多个分号隔开的邮箱 var reg = /^((([a-z0-9_.-]+)@([\da-z.-]+).([a-z.]{2,6}????)*(([a-z0-9_.-]+)@([\da-z.-]+).([a-z.]{2,6})))$/; ...

vue 字数限制_Vue自定义指令实现文本框字数限制

weixin_33816685的博客

02-06

1788

就是熟悉下 vue 的自定义指令，和之前 jQuery 实现这样的功能的做法类似，样式没怎么修改，不过可以随意按 ui 的设计来修改，先看看截图：如上图，先明确我们的目标：单行/多行文本框有不同的样式使用时只提供文本框标签，只需一个自定义指令完成所有工作显示总字数和当前输入字数字数统计考虑文本框原有的值超出最大限制不能继续输入使用方式：// 对应上面图片核心思想是找到自定义指令当前元素，给其外面包...

input输入限制以及校验之总结篇

Ndbsa的博客

12-03

5140

input的输入限制是一个非常常见的需求，比如我们在一个表单内需要输入时间，则我们就需要限制输入的内容只能是数字，并且是正整数，这如果用表单校验也可以，但是如果直接可以通过input的输入限制，直接讲此扼杀在摇篮中那岂不是美哉下面就是我对一些常见的输入限制的一些总结：（本文的技术栈是Vue3） 2.通过computed方法绑定并劫持数据：当我们在input框内输入的时候，方法是要优先于事件执行的，所以我个人推荐是使用方法进行输入的限制以及拦截正负数，小数都可以只能输入整数：只能输入正数:

vue中两个或多个input输入框必填一个原来可以这样实现！（输入框二选一必填校验函数+英文数字/中文数字正则）

sunwenpinglike的博客

02-04

6107

简单快速实现两个输入框必填一个加正则校验（用校验函数实现两个输入框必填一个，加输入框只能输入中文和数字，另一个只能输入英文和数字）保姆式教学！

【VUE】手动触发input输入框验证

SZnAl的博客

07-22

3395

输入框本身有自己的验证规则，但是有时候在切换选项等操作后输入框并不会实时的进行验证更新，可能已经符合规则了，但他还是提示错误信息。点击顶部radio切换时候，实际已经满足规则，但还是提示已存在，需要手动在输入框内点击，再点击空白区域，输入框失焦一次后才能触发更新。...

vue校验多个邮箱，中间用逗号或换行符隔开

09-30

Vue.js 可以通过使用自定义指令或者表单验证规则来实现在输入框中校验多个邮箱地址。这里提供一种简单的方式： 1. **使用 v-model 和数组绑定**: 创建一个数组来存储所有的邮箱，并使用 `v-model` 绑定到这个数组。例如: ```html <input type="text" v-model="emailList" placeholder="请输入邮箱，用逗号或换行分隔"> ``` 在 Vue 实例中: ```javascript data() { return { emailList: [], }; }, ``` 2. **自定义校验函数**: 定义一个数组校验函数，检查每个元素是否符合邮箱格式: ```javascript methods: { validateEmails() { const regex = /^[\w.-]+@[\w-]+\.\w+$/; // 邮箱正则表达式 this.emailList.forEach((email) => { if (!regex.test(email.trim())) { this.$set(this.emailList, this.emailList.indexOf(email), ""); // 清除无效邮箱并更新视图 } }); }, }, watch: { 'emailList': { immediate: true, handler(newVal, oldVal) { this.validateEmails(); }, }, }, ``` 3. **表单提交前的验证**: 在用户提交表单前，可以再次调用这个验证函数检查所有邮箱。