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公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
Vue用mixin合并重复代码的实现
Nov 27 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
PHP中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
Python KMeans聚类问题分析
2018/02/23 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
python简单验证码识别的实现方法
2019/05/10 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
python写程序统计词频的方法
2019/07/29 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
音乐专业自荐信
2014/02/07 职场文书
大学同学会活动方案
2014/08/20 职场文书
鲁迅故里导游词
2015/02/05 职场文书
客房领班岗位职责
2015/02/11 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL
MySQL创建管理HASH分区
2022/04/13 MySQL