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之五(取DOM元素)
Jun 20 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
关于vue组件事件属性穿透详解
Oct 28 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中目录,文件操作详谈
2007/03/19 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
js date 格式化
2017/02/15 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
python中对数据进行各种排序的方法
2019/07/02 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
tensorflow 模型权重导出实例
2020/01/24 Python
详解Python的三种拷贝方式
2020/02/11 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
水污染治理专业毕业生推荐信
2013/11/14 职场文书
项目经理任命书
2014/06/04 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
MySQL一些常用高级SQL语句
2021/07/03 MySQL
Windows server 2012搭建FTP服务器
2022/04/29 Servers