vue写一个过滤html字符串,vue+element项目中过滤输入框特殊字符小结

可以在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}个字符`

});

}

returnvalue;

};

HTML部分

searchForm.logId=validSe(e，15)'placeholder="请输入日志ID">

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

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

//只能输汉字

Vue.prototype.chineseOnly=function(value){

value=value.replace(/[^\u4E00-\u9FA5]/g,'');

returnvalue

};

//只能输正整数

Vue.prototype.idOnly=function(value){

value=value.replace(/[^0-9]/g,'');

returnvalue

};

//不允许输汉字

Vue.prototype.noChineseOnly=function(value){

value=value.replace(/[\u4E00-\u9FA5]/g,'');

returnvalue

};

//逗号和数字

Vue.prototype.programIdOnly=function(value){

value=value.replace(/[^0-9,]/g,'');

returnvalue

};

//数字和回车

Vue.prototype.idsOnly=function(value){

value=value.replace(/[^\r\n0-9]/g,'');

returnvalue

};

//数值大小限定

Vue.prototype.numberLimit=function(value){

value=value.replace(/[^0-9]/g,'');

if(value>=2147483647){

this.$message({

type:"warning",

message:`最大可输入值为2147483647`

});

}

returnvalue

};

//正整数

Vue.prototype.onlyPositiveInteger=function(value){

value=String(value).match(/[1-9]\d*/g,"")

returnvalue===null?'':Number(value[0])

};

//正整数(包含0)

Vue.prototype.onlyPositiveInteger1=function(value){

console.log(typeof(value));

value=String(value).match(/[1-9]\d*|0/g,"")

returnvalue===null?'':Number(value[0])

};

//负整数

Vue.prototype.onlyNegativeInteger=function(value){

value=String(value).match(/^-[1-9]*\d*/g,"")

returnvalue===null?'':value[0]==='-'?'-':value[0]==='-0'?'':Number(value[0])

};

//负整数(包含0)

Vue.prototype.onlyNegativeInteger1=function(value){

value=String(value).match(/^-[1-9]*\d*|0/g,"")

returnvalue===null?'':value[0]==='-'?'-':Number(value[0])

};

//整数

Vue.prototype.onlyInteger=function(value){

value=String(value).match(/^-?[1-9]*\d*|0/g,'')

returnvalue===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

returnmin

}elseif(value>max){

returnmax

}else{

returnvalue

}

};