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使用手册之 事件处理
Mar 24 Javascript
JS编程小常识很有用
Nov 26 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 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
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
php实现图片缩略图的方法
2016/03/29 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
IE下JS读取xml文件示例代码
2013/08/05 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
深入浅出了解Node.js Streams
2019/05/27 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
详细解读tornado协程(coroutine)原理
2018/01/15 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
django rest framework 过滤时间操作
2020/07/12 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
Python如何使用input函数获取输入
2020/08/06 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
打架检讨书100字
2014/01/08 职场文书
勤俭节约倡议书
2014/04/14 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
酒店端午节活动方案
2014/08/26 职场文书
三八节祝酒词
2015/08/11 职场文书
交通安全学习心得体会
2016/01/18 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书