您好,登錄后才能下訂單哦!
可以在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項目中過濾輸入框特殊字符小結,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。