vue.js 输入框输入值自动过滤特殊字符替换中问标点操作

我就废话不多说了，大家还是直接看代码吧~

<Input v-model="relatedWords" type="textarea" placeholder="请输入" @input='verifyInput(formItem.relatedWords)'/>

verifyInput(v){
  let _this=this;
  let punctuation = /[`~!@#$%^&*_\-=<>?:"{}|.\/;'\\[\]·~！@#￥%……&——\-={}|《》？：“”【】、；‘'。、]/im;
  let arr=v.split('')
  let str=''
  arr.map(i=>{
    if(!punctuation.test(i)){
     str+=i
    }
  })
  str=str.replace(/（/g,'(')
  str=str.replace(/）/g,')')
  str=str.replace(/，/g,',')
  this.$nextTick(j=>{
    this.relatedWords=str
  })
},

补充知识：vue el-input 禁止输入特殊字符 只可输入数字 正则验证

我就废话不多说了，大家还是直接看代码吧~

<el-input
 size="small"
 v-model="city"
 placeholder="请输入城市名称"
 @blur="addCity(scope.$index)"
 @keyup.native="btKeyUp"
 @keydown.native="btKeyDown"
></el-input>

// methods内 

   // 只能输入汉字、英文、数字
  btKeyDown(e) {
    e.target.value = e.target.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,"");
  },
  //限制输入特殊字符
  btKeyUp(e) {
    e.target.value = e.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/g,"");
  }

在el-input 内 使用 keyup等事件 需要添加 .native 否则无法正常执行事件

下面是 只可输入数字

 <el-input
  size="small"
  v-model="scope.row.order_number"
  v-show="scope.row.isShowInp_order"
  @blur="editOrder(scope.$index,scope.row)"
  v-focus
  @keyup.native="UpNumber"
  @keydown.native="UpNumber"
  class="table_input"
></el-input>  

// 只可输入数字
  UpNumber(e) {
    e.target.value = e.target.value.replace(/[^\d]/g,"");
  }

以上这篇vue.js 输入框输入值自动过滤特殊字符替换中问标点操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue自定义指令限制输入框输入值的步骤与完整代码

    需求 前端开发过程中,经常遇到表单校验的需求,比如校验用户输入框的内容,限制用户只能输入数字. 本文内容基于 element-ui,el-form 组件可以绑定 model.rule 用于表单内容校验,但如果有多个表单多个输入框那就得写很多个 rule,虽然方法可以通用可是使用起来也是比较繁琐的,可通过自定义执行实现一次注册,多次使用. Vue 自定义指令 我们使用 el-input 作为表单的输入框 1. 先注册一个自定义指令 import Vue from 'vue'; Vue.direct

  • vue实现Input输入框模糊查询方法

    本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码,供大家参考,具体内容如下 原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item,则返回 item 的第一次出现的位置.开始位置的索引为 0. 如果在数组中没找到指定元素则返回 -1. 下面先看示例: 搜索前: 搜索后: 实现方法: methods:{ // 点击搜索工程 search

  • VUE.js实现动态设置输入框disabled属性

    需求背景 页面从list列表展示,跳转到新增和修改的时候,新增和修改用的是同一个页面:add-or-update.vue. 修改的时候用户的账号不能修改,因此需要将账号的输入框属性设置为"只读". 代码样例 <el-input v-model="dataForm.account" placeholder="账号" v-bind:disabled="dataForm.id!=0"></el-input>

  • Vue filters过滤器的使用方法

    本文实例为大家分享了Vue filters过滤器使用,供大家参考,具体内容如下 实例 先来看看一段代码理解下 html <div id="app"> {{message | filters2| filters3(true,priceCount)}} </div> js var app = new Vue({ el: "#app", data: { message: 199, priceCount:.8 }, filters:{ filters

  • vue.js 输入框输入值自动过滤特殊字符替换中问标点操作

    我就废话不多说了,大家还是直接看代码吧~ <Input v-model="relatedWords" type="textarea" placeholder="请输入" @input='verifyInput(formItem.relatedWords)'/> verifyInput(v){ let _this=this; let punctuation = /[`~!@#$%^&*_\-=<>?:"{}

  • jquery.fastLiveFilter.js实现输入自动过滤的方法

    jquery.fastLiveFilter.js实现输入自动过滤的方法

    本文实例讲述了jquery.fastLiveFilter.js实现输入自动过滤的方法.分享给大家供大家参考.具体如下: 本效果是使用jquery.fastLiveFilter.js插件来实现的,类似于搜索框的输入提示功能,实现对匹配项目的自动过滤功能,当你输入的时候,会根据输入的字符智能匹配符合的内容,自动列出来,提高人性化操作体验,如果您对jquery.fastLiveFilter.js插件的用法感兴趣,这是个很不错的例子. 运行效果截图如下: 具体代码如下: <!doctype html>

  • vue.js的简单自动求和计算实例

    一.导入vue.js 可以用cdn,也可以用内嵌去官网下载插件https://vuejs.org/js/vue.js. <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> 二.前端页面 我用了一个表格,话不多说直接上代码 <div id="vuetest"> <table> <tr> <td>数学</td>

  • vue/js实现页面自动往上滑动效果

    vue/js实现页面自动往上滑动效果

    本文实例为大家分享了vue/js实现页面自动往上滑动的具体代码,供大家参考,具体内容如下 最近做的新项目中要求让看不见的内容自动往上滑动一定的距离,使之可以看到,下面我来分享一下. 效果图: 我主要是使用 scrollTop 来做的往上滑动的功能,使用 animate 函数使之有一定的动画效果.有一个注意点就是要滚动的元素是父级标签,比如我下面列举的代码:id=“scrollbody” 是放在父级标签那里的,它包裹着多项 class=“item” ,如果还是不懂的话,就看使用了v-for在哪个标

  • vue.js click点击事件获取当前元素对象的操作

    Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({ el: '#app', data: { message: 'He

  • Vue.js使用axios动态获取response里的data数据操作

    今天开发时,使用axios返回的response中data有多个数据: 如果是获取cn里的数据的,可以用: response.data.cn 但是需求是根据选择来获取数据的,会发生变化,最开始的想法是,用一个变量来记录需要获取的key: 假设need是需要获取的某个key const dkey = this.need; response.data.dkey 这样发现获取不到数据,这是因为vue.js把dkey当成data里的某一个key了,类似于上面的"cn". 折腾了很久才突然想起,

  • JS实现根据指定值删除数组中的元素操作示例

    本文实例讲述了JS实现根据指定值删除数组中的元素操作.分享给大家供大家参考,具体如下: 解决问题: 1 .JS判断元素是否在数组内 2. JS根据指定值删除数组中的元素 要点:相当于jquery 的 $.inArray() 这个方法 原生js 如果想删除数组,有一个函数 splice()   ~~ 删除元素,并向数组添加新元素. 这个货 是根据数组内的下标 也就是索引来 删除元素的比如: var arrList = ['a','b','c','d']; arrList.splice(2,1);

  • js输入框邮箱自动提示功能代码实现

    同理 此插件不需要任何html标签,只需要一个输入框 有相对应的class类名就ok 且父级有个class类名,其他的都不需要.内部的HTML代码都是自动生成的. HTML代码如下: 复制代码 代码如下: <div class="parentCls">    <input type="text" class="inputElem"> </div> 其实上面的div标签都可以不需要 只需要在input输入框 且父

  • Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作

    Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作

    本教程基于Laravel 5.4 开始之前首先准备好开发环境,我们假设你已经安装好 Laravel,至于 Vue 的引入,请参考官方文档. 做好上述准备工作后就可以开始我们的开发了,本教程中我们将演示文章发布页面的表单 验证 . 首先在 routes/web.php 中新增两条路由规则: Route::get('post/create', 'PostController@create'); Route::post('post/save', 'PostController@save'); 然后在项

  • Vue.js每天必学之组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 使用组件 注册 之前说过,我们可以用 Vue.extend() 创建一个组件构造器: var MyComponent = Vue.extend({ // 选项... }) 要把这个构造器用作组件,需要用 `Vue.compone

随机推荐