vue input 输入校验字母数字组合且长度小于30的实现代码


Posted in Javascript onMay 16, 2018

下面一段代码给大家分享vue input 校验字母数字组合且长度小于30,具体代码如下所示:

<Input v-model="form.glhm" placeholder="请输入关联交易号" style="width:240px" @on-blur="validateJyh(form.glhm)"></Input> 

validateJyh(glhm){//校验关联交易号 
    var reg = /^[A-Za-z0-9]{1,30}$/; 
    if(!reg.test(glhm)){ 
     this.$Message.error("请输入字母或数字组成的交易关联号"); 
     this.form.glhm = ''; 
    } 
   },

下面看下在Vue.Js下使用el-input框只能输入数字并限制位数并且限制中文输入以及粘贴

var tr = document.getElementById("Id1"), // 取得ID为Id1的tr对象
 inps = tr.getElementsByTagName('input'); // 从tr 对象中获取所有input对象
for(var i = 0, len = inps.length; i < len; i++) {
 inps[i].value = ''; // 将每一个input的value置为空
}
document.getElementById("t").getElementsByTagName('input')[0].value='';

输入中文置空的方法

<el-input
@change="checkNo(searchForm.msel.mselTotalConsumTimes)"
type = "text"
onkeypress="return event.keyCode>=48&&event.keyCode<=57"
size="small"
:maxlength="6"
style="width: 120px"
v-model="searchForm.msel.mselTotalConsumTimes"></el-input>
 次
</el-col>

checkNo(value){
let reg = /^[1-9]\d*$/;
if (value) {
if (value >
999999 || new
RegExp(reg).test(value) ==
false) {
setTimeout(() 
=> {
this.searchForm.msel.mselTotalConsumTimes ='';
   }, 500);
}
}
},

总结

以上所述是小编给大家介绍的vue input 校验字母数字组合且长度小于30的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
Jquery中增加参数与Json转换代码
Nov 20 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
vue模板语法-插值详解
Mar 06 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 #Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 #Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 #jQuery
vue keep-alive请求数据的方法示例
May 16 #Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 #Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 #Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 #Javascript
You might like
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
jQuery.each()用法分享
2012/07/31 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python中threading超线程用法实例分析
2015/05/16 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
中学运动会广播稿
2014/01/19 职场文书
导购员的岗位职责
2014/02/08 职场文书
大学专科自荐信
2014/06/17 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
销售会议开幕词
2015/01/28 职场文书
致运动员的广播稿
2015/08/19 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
Python中requests做接口测试的方法
2021/05/30 Python