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 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 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 飞信好友免费短信API接口开源版
2010/07/22 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
Python过滤列表用法实例分析
2016/04/29 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
python elasticsearch环境搭建详解
2019/09/02 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
教师批评与自我批评范文
2014/10/15 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
2015年读书月活动总结
2015/03/26 职场文书
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python