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 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 Javascript
vue组件的路由高亮问题解决方法
May 11 Vue.js
详解通过源码解析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
当海贼王变成JOJO风
2020/03/02 日漫
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
PHP安全下载文件的方法
2016/04/07 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
Python找出list中最常出现元素的方法
2016/06/14 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
3分钟学会一个Python小技巧
2018/11/23 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
金蝶的一道SQL笔试题
2012/12/18 面试题
电工工作职责范本
2014/02/22 职场文书
高三励志标语
2014/06/05 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
2014年路政工作总结
2014/12/10 职场文书
客房服务员岗位职责
2015/02/09 职场文书
综治目标管理责任书
2015/05/11 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
优秀大学生申请书
2019/06/24 职场文书
68句权威创业名言
2019/08/26 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电