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 相关文章推荐
JS 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
vue实现树状表格效果
Dec 29 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读取文件内容的几种方法详解
2013/06/26 PHP
PHP中比较时间大小实例
2014/08/21 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
用jscript实现新建word文档
2007/06/15 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
详解node.js 事件循环
2020/07/22 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
详解Python中的正则表达式的用法
2015/04/09 Python
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
python设置值及NaN值处理方法
2018/07/03 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
Django中Middleware中的函数详解
2019/07/18 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
电脑租赁公司创业计划书
2014/01/08 职场文书
父亲婚礼答谢词
2015/01/04 职场文书