vue 中input的输入验证

在vue中用最普通的input对内容做限制比较容易，但是没有样式，比较丑，比如只能输入文字(以下都以文字为例)，直接对其值正则匹配即可 >查看其他匹配的方法<

<input type="text" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')"/>

但是想要好看一点的就需要使用vue中的输入框Input（当然也可以去给普通的调样式），但是验证的方法和普通的有些区别

<Input v-model="name" placeholder="请输入"   @keyup.native="inputChange($event)" @keydown.native="inputChange($event)"/>

如果使用了iview中的Input组件

<Input  placeholder="请输入"  @on-keyup="inputChange($event)" />

验证的方法

inputChange(e) {const val = e.target;val.value = val.value.replace(/[^\u4E00-\u9FA5]/g, ''); // 清除除了中文以外的输入的字符this.name = val.value;},

还有就是可以写一个监听器，当输入框的值改变时就去验证

watch:{name:function(){this.name=this.name.replace(/[^\u4E00-\u9FA5]/g, '');},},

vue 中input的输入验证相关推荐

vue中@input事件输入英文验证，切换中文文输入法验证错乱的解决方法：compositionstart和compositionend事件
最近做需求,遇到一个vue中输入4位英文判断图形验证的问题.就这个问题测试提了六七个bug,实属把握整不会了.下面就最主要的一个问题写一下解决方法: 需求详情:oninput事件输出长度为4位时,判断 ...
vue中input标签的使用
vue中input标签的使用普通input标签 <input type="text" value="" placeholder="placeh ...
vue 中 input事件
vue 中 input事件 input事件的使用 <div :id="inputId" :class="['textarea_content_right']&quo ...
在vue中input标签手机号码进行正则验证
今天遇到一个问题就是在vue中给input进行正则手机号码的验证下面是今天的代码,用js进行书写,没有用elementUI,代码如下: <div cla ...
html 只能输入正数,vue 限制input只能输入正数
在某些项目中 input 框只能输入数字,可以用以下办法: 先在标签上绑定上 @input 事件来监听标签的值变化,通过正则来改变输入的值. 第二部封装个自定义指令放在标签上! directives: ...
input 手机号码输入验证
手机号码输入验证: function isPhoneNum(str) {return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[ ...
vue中input绑定事件
做的越多遇到的问题越多,解决的问题越多,你会的就越多,加油我们都知道vue中是可以双向数据绑定的,但是有时候我们的事件会和双向绑定冲突. input中如果用了v-model,那么给它绑定的事件就不会 ...
python中input同时输入多个_python如何利用input函数输入多个参数?
如果考虑这样的应用: 程序需要多个参数,并且希望每输入一个参数就进行换行,即希望一次输入多个参数. 关于这样问题网络上有一些帖子,但是总是没有讲到要点,这里解析如下. 关键知识点: 1.input函数 ...
vue 中 Element-UI 表单验证的几种方法
在开始之前需要把element-ui在vue中引入好,如果没有引入好的话,需要先跟着element-ui的文档进行操作,接下来就可以进行学习了. 第一种:在el-form-item单个添加验证这种方 ...

vue 中input的输入验证

vue 中input的输入验证相关推荐

最新文章

热门文章