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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
Node.js实现断点续传
Jun 23 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
PHPEXCEL 使用小记
2013/01/06 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
python thread 并发且顺序运行示例
2009/04/09 Python
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
JS原生实现轮播图的几种方法
2021/03/23 Javascript
一名女生的自荐信
2013/12/08 职场文书
农业资源与环境专业自荐信范文
2013/12/30 职场文书
单位办理社保介绍信
2014/01/10 职场文书
超市中秋节活动方案
2014/02/12 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
小班开学寄语
2014/04/04 职场文书
优秀学生评语大全
2014/04/25 职场文书
5s标语大全
2014/06/23 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
关于迟到的检讨书
2015/05/06 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
python实现网络五子棋
2021/04/11 Python
教你一步步实现一个简易promise
2021/11/02 Javascript