欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2021-04-15 11:15:26|栏目:vue|点击:

 可以在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中date format的性能详解

栏    目:vue

下一篇:vue实现简单全选和反选功能

本文标题:vue+element项目中过滤输入框特殊字符小结

本文地址:http://www.codeinn.net/misctech/101374.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有