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 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
node.js基础知识小结
Feb 26 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
js实现浏览器打印功能的示例代码
Jul 15 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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
php 归并排序 数组交集
2011/05/10 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
Python数据库小程序源代码
2019/09/15 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
追悼会子女答谢词
2014/01/28 职场文书
函授自我鉴定范文
2014/02/06 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
公司开业主持词
2015/07/02 职场文书
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL