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/JQuery显示或隐藏文本的方法
Feb 13 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 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脚本的10个技巧(8)
2006/10/09 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
PHP面向对象详解(三)
2015/12/07 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
javascript hasFocus使用实例
2010/06/29 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
js实现动态时钟
2020/03/12 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
python分割列表(list)的方法示例
2017/05/07 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
用python爬取租房网站信息的代码
2018/12/14 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
Python如何使用字符打印照片
2020/01/03 Python
css3的transition属性详解
2014/12/15 HTML / CSS
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
奥地利网上书店:Weltbild
2017/07/14 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
单位介绍信范文
2014/01/18 职场文书
四年级科学教学反思
2014/02/10 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
公积金接收函格式
2015/01/30 职场文书
裁员通知
2015/04/25 职场文书
高中化学教学反思
2016/02/22 职场文书