vue+element项目中过滤输入框特殊字符小结
作者:Thinkguo 时间:2024-04-28 10:53:44
可以在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项目中过滤输入框特殊字符小结,网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
来源:https://www.cnblogs.com/thinkguo/archive/2019/08/06/11310376.html
标签:vue,element,过滤,特殊,字符


猜你喜欢
在ASP.NET2.0通过SMTP的验证发送EMAIL
2007-09-23 12:29:00
Python使用pdb调试代码的技巧
2022-11-18 04:36:06

关于AJAX缓存数据
2008-03-26 12:11:00
axios发送post请求springMVC接收不到参数的解决方法
2023-07-02 16:59:05
HTML 5 胜出:XHTML2 宣告夭折
2009-07-12 15:23:00
opencv实现车牌识别
2023-08-10 01:59:38
Python解析json文件相关知识学习
2022-04-01 12:58:19
Python 反转字符串(reverse)的方法小结
2023-05-28 11:04:22
Django 解决上传文件时,request.FILES为空的问题
2021-10-21 19:37:41
python类中super() 的使用解析
2022-12-02 09:08:10
Python 中enum的使用方法总结
2022-11-10 03:13:14
DBA应当了解的MySQL客户端程序启动选项
2009-01-04 13:00:00

在python中将字符串转为json对象并取值的方法
2022-12-19 02:22:37
SQL对时间处理的语句小结
2011-12-01 07:53:04
Tensorflow 2.4加载处理图片的三种方式详解
2023-12-07 05:28:26
一个小时内学习 SQLite 数据库
2012-05-22 18:51:30
一篇文章入门Python生态系统(Python新手入门指导)
2023-11-03 01:12:00

Tensorflow加载与预处理数据详解实现方法
2023-01-29 02:57:09

ASP常见错误详解及解决方案小结 推荐第1/2页
2011-02-24 11:19:00
如何在Unix系统环境下安装MySQL数据库
2009-01-04 13:09:00