vue+element项目中过滤输入框特殊字符小结


Posted in Javascript onAugust 07, 2019

 可以在main.js中写入方法

Vue.prototype.validSe = function (value, number = 255) {
value = value.replace(/[`~*~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、]/g, '').replace(/\s/g, "");
if (value.length >= number) {
this.$message({
type: "warning",
message: `输入内容不能超过${number}个字符`
});
}
return value;
};

HTML部分

<el-input maxlength='15' :value="searchForm.logId" @input='e => searchForm.logId = validSe (e,15)' placeholder="请输入日志ID"></el-input>

需要将v-model拆分为:value和@input

通过以上方法又扩展出以下方法

//只能输汉字
Vue.prototype.chineseOnly = function (value) {
value = value.replace(/[^\u4E00-\u9FA5]/g, '');
return value
};
//只能输正整数
Vue.prototype.idOnly = function (value) {
value = value.replace(/[^0-9]/g, '');
return value
};
//不允许输汉字
Vue.prototype.noChineseOnly = function (value) {
value = value.replace(/[\u4E00-\u9FA5]/g, '');
return value
};
 

//逗号和数字
Vue.prototype.programIdOnly = function (value) {
value = value.replace(/[^0-9,]/g, '');
return value
};
//数字和回车
Vue.prototype.idsOnly = function (value) {
value = value.replace(/[^\r\n0-9]/g, '');
return value
};
//数值大小限定
Vue.prototype.numberLimit = function (value) {
value = value.replace(/[^0-9]/g, '');
if (value >= 2147483647) {
this.$message({
type: "warning",
message: `最大可输入值为2147483647`
});
}
return value
};

// 正整数
Vue.prototype.onlyPositiveInteger = function (value) {
value = String(value).match(/[1-9]\d*/g, "")
return value === null ? '' : Number(value[0])
};
// 正整数(包含0)
Vue.prototype.onlyPositiveInteger1 = function (value) {
console.log(typeof (value));
value = String(value).match(/[1-9]\d*|0/g, "")
return value === null ? '' : Number(value[0])
};
// 负整数
Vue.prototype.onlyNegativeInteger = function (value) {
value = String(value).match(/^-[1-9]*\d*/g, "")
return value === null ? '' : value[0] === '-' ? '-' : value[0] === '-0' ? '' : Number(value[0])
};
// 负整数(包含0)
Vue.prototype.onlyNegativeInteger1 = function (value) {
value = String(value).match(/^-[1-9]*\d*|0/g, "")
return value === null ? '' : value[0] === '-' ? '-' : Number(value[0])
};
// 整数
Vue.prototype.onlyInteger = function (value) {
value = String(value).match(/^-?[1-9]*\d*|0/g, '')
return value === null ? '' : value[0] === '-' ? '-' : value[0] === '' ? '' : Number(value[0])
};
// 整数区间
Vue.prototype.onlySection = function (value, min, max) {
if (min < 0) {
value = String(value).match(/-?[1-9]*\d*/g, "")
} else {
value = String(value).match(/[1-9]*\d*/g, "")
}
// value = String(value).match(/-?[1-9]*\d*/g, "")
value = value === null ? '' : value[0] === '-' ? '-' : value[0] === '' ? '' : Number(value[0])
if (value < min) {
return min
} else if (value > max) {
return max
} else {
return value
}
};

总结

以上所述是小编给大家介绍的vue+element项目中过滤输入框特殊字符小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 #Javascript
javascript中的数据类型检测方法详解
Aug 07 #Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 #Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 #Javascript
微信小程序引入Vant组件库过程解析
Aug 06 #Javascript
Vue数据绑定实例写法
Aug 06 #Javascript
Vue代码整洁之去重方法整理
Aug 06 #Javascript
You might like
php+mysql分页代码详解
2008/03/27 PHP
php的curl实现get和post的代码
2008/08/23 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
php实现评论回复删除功能
2017/05/23 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
Python写入CSV文件的方法
2015/07/08 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python实现剪切功能
2019/01/23 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
Python zip函数打包元素实例解析
2019/12/11 Python
Django操作session 的方法
2020/03/09 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
爱普生美国官网:Epson美国
2018/11/05 全球购物
中学教师师德承诺书
2014/05/23 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
辞职申请书范本
2019/05/20 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript