欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2019年08月07日 09:06:31   作者:Thinkguo  
這篇文章主要介紹了vue+element項(xiàng)目中過濾輸入框特殊字符小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

 可以在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: `輸入內(nèi)容不能超過${number}個(gè)字符`
});
}
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

通過以上方法又?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
};
 

//逗號和數(shù)字
Vue.prototype.programIdOnly = function (value) {
value = value.replace(/[^0-9,]/g, '');
return value
};
//數(shù)字和回車
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)目中過濾輸入框特殊字符小結(jié),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

相關(guān)文章

  • Vue3中slot插槽基本使用

    Vue3中slot插槽基本使用

    插槽slot可以說在一個(gè)Vue項(xiàng)目里面處處都有它的身影,比如我們使用一些UI組件庫的時(shí)候,我們通??梢允褂貌宀蹃碜远x我們的內(nèi)容,這篇文章主要介紹了Vue3中slot插槽使用方式,需要的朋友可以參考下
    2022-08-08
  • vue封裝一個(gè)右鍵菜單組件詳解(復(fù)制粘貼即可使用)

    vue封裝一個(gè)右鍵菜單組件詳解(復(fù)制粘貼即可使用)

    關(guān)于vue項(xiàng)目中會出現(xiàn)一些需求,就是右鍵菜單項(xiàng)的功能實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue封裝一個(gè)右鍵菜單組件(復(fù)制粘貼即可使用)的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • Vue中computed和watch的區(qū)別小結(jié)

    Vue中computed和watch的區(qū)別小結(jié)

    watch和computed都是以Vue的依賴追蹤機(jī)制為基礎(chǔ)的,當(dāng)某一個(gè)依賴型數(shù)據(jù)發(fā)生變化的時(shí)候,所有依賴這個(gè)數(shù)據(jù)的相關(guān)數(shù)據(jù)會自動發(fā)生變化,即自動調(diào)用相關(guān)的函數(shù),來實(shí)現(xiàn)數(shù)據(jù)的變動,這篇文章簡單介紹下Vue中computed和watch的區(qū)別異同,感興趣的朋友一起看看吧
    2022-12-12
  • vue實(shí)現(xiàn)自定義多選與單選的答題功能

    vue實(shí)現(xiàn)自定義多選與單選的答題功能

    這篇文章主要介紹了使用vue實(shí)現(xiàn)自定義多選與單選的答題功能,vue組件中在表單方面提供了一個(gè)v-model指令,非常好用,具體實(shí)現(xiàn)過程大家跟隨腳本之家小編一起看看吧
    2018-07-07
  • Vue3報(bào)錯(cuò)‘defineProps‘?is?not?defined的解決方法

    Vue3報(bào)錯(cuò)‘defineProps‘?is?not?defined的解決方法

    最近工作中遇到vue3中使用defineProps中報(bào)錯(cuò),飄紅,所以這篇文章主要給大家介紹了關(guān)于Vue3報(bào)錯(cuò)‘defineProps‘?is?not?defined的解決方法,需要的朋友可以參考下
    2023-01-01
  • 解決Vue編譯時(shí)寫在style中的路徑問題

    解決Vue編譯時(shí)寫在style中的路徑問題

    下面小編就為大家?guī)硪黄鉀QVue編譯時(shí)寫在style中的路徑問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-09-09
  • Vue 虛擬列表的實(shí)戰(zhàn)示例

    Vue 虛擬列表的實(shí)戰(zhàn)示例

    這篇文章主要介紹了Vue 虛擬列表的實(shí)現(xiàn)示例,幫助大家更好的理解和學(xué)習(xí)使用vue,感興趣的朋友可以了解下
    2021-03-03
  • Vue3封裝hooks實(shí)現(xiàn)實(shí)時(shí)獲取麥克風(fēng)音量

    Vue3封裝hooks實(shí)現(xiàn)實(shí)時(shí)獲取麥克風(fēng)音量

    這篇文章主要為大家詳細(xì)介紹了Vue3如何通過封裝一個(gè)hooks實(shí)現(xiàn)實(shí)時(shí)獲取麥克風(fēng)音量功能,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下
    2024-03-03
  • 詳解vue3沙箱機(jī)制

    詳解vue3沙箱機(jī)制

    這篇文章主要介紹了詳解vue3 沙箱機(jī)制,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • vue3不同環(huán)境下實(shí)現(xiàn)配置代理

    vue3不同環(huán)境下實(shí)現(xiàn)配置代理

    這篇文章主要介紹了vue3不同環(huán)境下實(shí)現(xiàn)配置代理,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-05-05

最新評論