vue判断用户不能输入特殊字符，可自定义扩展

已于 2023-04-14 15:29:33 修改
阅读量1.3k 收藏 1
点赞数
分类专栏： vue
于 2022-03-24 14:53:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/myuanfang/article/details/123711070
版权

vue.js 
created(){
    this.getUserName();
}
 
//判断特殊字符
    getUserName(){
      let checkNick = new RegExp("[`@.~!#$^&*()=|{}':;',\\[\\]<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？%+_]");
      if(checkNick.test('@')){
         console.log('不能输入特殊字符');
      }else{
         console.log('没有输入特殊字符');
      }
    },

webYin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+element实现表单提交（正则验证表单项+限制特殊字符）
Debug的博客
03-23 524
【代码】vue+element实现表单提交（正则验证表单项+限制特殊字符）
vue自定义指令实现仅支持输入数字和浮点型的示例
10-16
在某些场景下，我们可能需要对用户输入进行特殊限制，例如只允许输入数字或浮点型数值。Vue 提供了自定义指令（Custom Directives）的功能，使得我们可以扩展其内置指令，以满足特定需求。 本篇文章将详细介绍如何...
vue 前端判断输入框不能输入0 空格。特殊符号。
weixin_30455661的博客
03-01 1401
oninput="value=value.replace(/[^\d.]/g,'').replace(/\.{2,}/g,'.').replace('.','$#$').replace(/\./g,'').replace('$#$','.');if(value.indexOf('.')< 0 && value !=''){value= parseFloat(value)}if...
vue element 表单验证 不能含有特殊字符
m0_55892953的博客
07-27 2307
data() { let validateInput = (rule, value, callback) => { if (!this.checkSpecialKey(value)) { callback(new Error("不能含有特殊字符！！")); } else { callback(); } }; return { form: { inputText: "" },.
vue3进阶(二)-封装utils方法——禁止输入框特殊字符校验 & form表单特定字符校验 & 自定义指令app.directive之防抖指令v-throttle
weixin_44867717的博客
09-04 588
/ 禁止输入框特殊字符校验if (!// 提交关键字message: '不能包含关键词： ' + wordKey,})return y} else {/[`~!:"{}|,./;'\\[\]·~！：“” ]/g,''return y/*** @description form表单特定字符校验*/：”“'。，、？]‘'@ /%"i++) {= -1) {callback(new Error('不能使用特殊字符'))return。
vue+element校验输入框不能有特殊字符
hong
09-24 5657
vue+element校验输入框不能有特殊字符 做管理后台的时候 遇到表单校验 要求是不能让用户输入特殊字符 简单散步即可 亲测有用 在data() 函数处声明方法 export default { data() { let validateInput = (rule, value, callback) => { if (!this.checkSpecialKey(value)) { callback(new Error("不能含有特殊字符！！")
vue实现可视化可拖放的自定义表单的示例代码
10-17
在本示例中，我们将探讨如何使用 Vue 实现一个可视化、可拖放的自定义表单。这个功能允许用户通过拖放操作从部件库创建并配置自定义表单，提高了开发效率和用户体验。 首先，我们要创建一个三栏布局，包括左侧部件...
基于vue、iview实现可输入零件号、银行卡号等等
09-23
如果用户按下左箭头键且输入光标在首位，或者按下右箭头键且光标在末位，我们可以阻止默认行为，确保输入不超出范围： ```javascript methods: { // ... handleKeyDown(event) { const code = event.keyCode; ...
VUE 自定义组件模板的方法详解
10-16
总之，Vue自定义组件模板提供了强大的灵活性和可扩展性，结合动态组件和组件工厂函数，可以实现高度动态化的页面布局和交互。在实际开发中，根据需求选择合适的方法，充分利用Vue.js的特性，可以显著提高代码的可...
Vue自定义指令介绍(2)
11-26
Vue.js 是一款流行的前端框架，它允许开发者通过自定义指令扩展HTML的功能，使其能够更好地适应MVVM（Model-View-ViewModel）模式。自定义指令在Vue中扮演着关键角色，它们使得开发者能够对DOM元素进行特定操作，...
vue--字符串检验--(数字--特殊字符--汉字)
weixin_43431702的博客
06-11 6975
1、只能输入数字 if (!/^[0-9]+$/.test(this.accountName)) { this.$message.error("只能输入数字"); } 2、不能包含特殊字符 var pattern = new RegExp( "[`~!@#KaTeX parse error: Expected group after '^' at position 1: ^̲&*(...
vue， js 正则邮箱验证、匹配非法字符、匹配中文
weixin_30606461的博客
06-29 551
验证邮箱 let self = this let regEmail= /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/ if (!regEmail.test(self.ruleForm.tourMail)) { 　　self.$message({ 　...
vue+element校验特殊字符、indexOf、substr
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
02-21 753
vue+element校验特殊字符、indexOf、substr
vue输入框限制特殊符号输入
最新发布
weixin_60265082的博客
11-21 718
vue输入框限制特殊符号输入
vue实现对一段文字中违禁词的校验
QZ9420的博客
12-30 1250
<template> <div> <ks-dialog ref="categoryDialog" title="不建议使用词排查入口" class="dialog-style" :visible.sync="dialogVisible" :modal-append-to-body="false" :close-o
vue+element表单校验输入框不能有特殊字符
weixin_54757930的博客
12-17 1521
添加链接描述
vue空格校验和特殊字符校验
qq_43610925的博客
08-13 6951
这个方法只可以校正输入框全是空格的情况，无法校正文字前中后的空格。这种方法可以校验输入框所有空格。
vue el-input 禁止输入特殊字符 只可输入数字 正则验证
热门推荐
冰魂魄的博客
07-19 1万+
在el-input 内 使用 keyup等事件 需要添加 .native 否则无法正常执行事件。限制输入正数 保留两位小数。下面是 只可输入数字。
第十二篇：VUE前端开发常用的正则表达式-封装js文件可直接引用
Yzt_199626的博客
05-26 1181
前言：在日常开发当中经常用到一些正则表达式，比如 电话号码、邮箱、IP和 数字等校验，个人每次都要去查阅下才知道怎么书写，特自己封装一个，方便后续查阅， 同时后续还会新增一些校验。 先看下校验的效果： 话不多说，直接放代码： 1. 个人封装一个公共的 js文件，名命为 regulation.js, 如下： export default { telphone: (rule, value, callback) => { if (value === '') { c..
vue中表单自定义校验不能出现中文字符
09-01
在Vue中，表单自定义校验不能出现中文字符，原因是因为Vue使用的是JavaScript语言，而JavaScript默认使用的是Unicode字符集。Unicode字符集包含了全世界几乎所有的字符，包括中文字符。但是，JavaScript的正则表达式在处理Unicode字符时，可能会出现一些问题。 为了解决这个问题，我们可以使用Unicode转义序列来表示中文字符。Unicode转义序列的格式为"\uXXXX"，其中XXXX是一个四位的十六进制数，代表一个Unicode字符。 举个例子，假设我们要自定义校验一个表单中的输入值不能包含中文字符，我们可以使用正则表达式进行校验。正则表达式可以使用Unicode转义序列来排除中文字符。 下面是一个简单的示例代码： ```javascript Vue.directive('no-chinese', { update: function (el, binding, vnode) { const value = vnode.data.model.value; const pattern = /[^\u4e00-\u9fa5]/g; // 使用Unicode转义序列排除中文字符 const isValid = pattern.test(value); if (!isValid) { // 如果输入值中包含中文字符，则给输入框添加class来指示错误 el.classList.add('has-error'); } else { // 如果输入值中不包含中文字符，则移除错误class el.classList.remove('has-error'); } } }); ``` 在上面的代码中，我们定义了一个名为"no-chinese"的自定义指令，通过`update`钩子函数来处理输入值的校验。我们使用了`/[^\u4e00-\u9fa5]/g`正则表达式来排除中文字符。 当输入值中包含中文字符时，我们通过给输入框添加class "has-error"来指示错误。当输入值中不包含中文字符时，我们移除错误class。 当然，这只是一个简单的示例，请根据实际需求进行适当的修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值