vue+element項目中過濾輸入框特殊字符小結
更新時間：2019年08月07日 09:06:31 作者：Thinkguo
這篇文章主要介紹了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}個字符`
});
}
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])
};
// 整數區(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
}
};
總結
以上所述是小編給大家介紹的vue+element項目中過濾輸入框特殊字符小結,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
這篇文章主要介紹了Vue $mount實現消息彈窗組件的相關知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
vue+element-ui+axios多文件上傳的實現并顯示整體進度
這篇文章主要介紹了vue+element-ui+axios多文件上傳的實現并顯示整體進度，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue彈窗插件實戰(zhàn)代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本文主要介紹了rollup3.x+vue2打包組件的實現，詳細的介紹了打包會存在的問題，包版本的問題，babel 轉換jsx等問題，具有一定的參考價值，感興趣的可以了解一下2023-03-03
在之前的一個小項目中,用到的顯示當地的地圖功能,下面這篇文章主要給大家介紹了關于Vue項目中使用百度地圖api的詳細步驟,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細介紹了vue.js使用Element-ui中實現導航菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本篇文章主要介紹了vuelidate 對于vueJs2.0的驗證解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
vue項目中vue-echarts講解及常用圖表實現方案(推薦)
這篇文章主要介紹了vue項目中vue-echarts講解及常用圖表方案實現,主要針對代碼示例中的內容進行問題講解，詳細代碼在文章中給大家提到，需要的朋友可以參考下2022-09-09
這篇文章主要為大家介紹了Vue之生命周期函數，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
今天小編就為大家分享一篇vue項目出現頁面空白的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10