可以在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+element項目中過濾輸入框特殊字符小結,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
新聞熱點
疑難解答