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 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
js控制div及网页相关属性的代码
Dec 19 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 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
mysql 全文搜索 技巧
2007/04/27 PHP
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
php实现购物车功能(上)
2020/07/23 PHP
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
Python3几个常见问题的处理方法
2019/02/26 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
keras 权重保存和权重载入方式
2020/05/21 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
Java基础知识面试要点
2016/07/29 面试题
工程力学专业自荐信范文
2014/03/17 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
最美家庭活动方案
2014/08/31 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
90条交通安全宣传标语
2019/10/12 职场文书