快捷導(dǎo)航

vue+element項(xiàng)目中過(guò)濾輸入框特殊字符小結(jié)

更新時(shí)間：2019年08月07日 09:06:31 作者：Thinkguo

這篇文章主要介紹了vue+element項(xiàng)目中過(guò)濾輸入框特殊字符小結(jié)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

可以在main.js中寫(xiě)入方法

 Vue.prototype.validSe = function (value, number = 255) {
value = value.replace(/[`～*~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/g, '').replace(/\s/g, "");
if (value.length >= number) {
this.$message({
type: "warning",
message: `輸入內(nèi)容不能超過(guò)${number}個(gè)字符`
});
}
return value;
};

HTML部分

<el-input maxlength='15' :value="searchForm.logId" @input='e => searchForm.logId = validSe (e，15)' placeholder="請(qǐng)輸入日志ID"></el-input>

需要將v-model拆分為:value和@input

通過(guò)以上方法又?jǐn)U展出以下方法

//只能輸漢字
Vue.prototype.chineseOnly = function (value) {
value = value.replace(/[^\u4E00-\u9FA5]/g, '');
return value
};
//只能輸正整數(shù)
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
};
 

//逗號(hào)和數(shù)字
Vue.prototype.programIdOnly = function (value) {
value = value.replace(/[^0-9,]/g, '');
return value
};
//數(shù)字和回車(chē)
Vue.prototype.idsOnly = function (value) {
value = value.replace(/[^\r\n0-9]/g, '');
return value
};
//數(shù)值大小限定
Vue.prototype.numberLimit = function (value) {
value = value.replace(/[^0-9]/g, '');
if (value >= 2147483647) {
this.$message({
type: "warning",
message: `最大可輸入值為2147483647`
});
}
return value
};

// 正整數(shù)
Vue.prototype.onlyPositiveInteger = function (value) {
value = String(value).match(/[1-9]\d*/g, "")
return value === null ? '' : Number(value[0])
};
// 正整數(shù)（包含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])
};
// 負(fù)整數(shù)
Vue.prototype.onlyNegativeInteger = function (value) {
value = String(value).match(/^-[1-9]*\d*/g, "")
return value === null ? '' : value[0] === '-' ? '-' : value[0] === '-0' ? '' : Number(value[0])
};
// 負(fù)整數(shù)（包含0）
Vue.prototype.onlyNegativeInteger1 = function (value) {
value = String(value).match(/^-[1-9]*\d*|0/g, "")
return value === null ? '' : value[0] === '-' ? '-' : Number(value[0])
};
// 整數(shù)
Vue.prototype.onlyInteger = function (value) {
value = String(value).match(/^-?[1-9]*\d*|0/g, '')
return value === null ? '' : value[0] === '-' ? '-' : value[0] === '' ? '' : Number(value[0])
};
// 整數(shù)區(qū)間
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
}
};

總結(jié)

以上所述是小編給大家介紹的vue+element項(xiàng)目中過(guò)濾輸入框特殊字符小結(jié),希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: