欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-21 21:29:43
可以在main.js中写入方法 HTML部分 需要将v-model拆分为:value和@input 通过以上方法又扩展出以下方法 ......

可以在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
}
};