資訊專欄INFORMATION COLUMN
摘要：中結(jié)合實現(xiàn)限制輸入框只能輸入正整數(shù)如果覺得對您有所幫助，麻煩您動動您的小手指給點個贊唄中禁止輸入小數(shù)和負數(shù)只允許輸入正整數(shù)做法一利用禁止按鍵的方法，主要是依靠禁止按下減號以及小數(shù)點來完成的首先要監(jiān)聽鍵盤按下事件，因為上面的組件監(jiān)聽事件是沒有
Vue中結(jié)合ElementUI實現(xiàn)：限制輸入框只能輸入正整數(shù)
如果覺得對您有所幫助，麻煩您動動您的小手指給點個贊唄(*^▽^*)
input中禁止輸入小數(shù)和負數(shù)（只允許輸入正整數(shù)） 做法一：利用禁止按鍵的方法，主要是依靠禁止按下減號以及小數(shù)點來完成的首先要監(jiān)聽keyup（鍵盤按下）事件，因為elementUi上面的input組件監(jiān)聽事件是沒有這個事件的，所以可能會報錯，所以我們需要加個vue事件的修飾符 .native，代表原生事件的意思。
然后我們傳個$event對象進去來獲取原生的DOM（可以簡單理解為觸發(fā)事件的本身）
接下來就是在methods中寫這個函數(shù)了
具體的意思我已經(jīng)寫在上面了，按下鍵后，可以自己彈出一下keynum和keychar所代表的的字符或者鍵盤碼，根據(jù)哪個判斷都可以，我選擇使用鍵盤碼來判斷
進入判斷后我們就可以做交互了，我選擇清掉用戶所輸入的數(shù)據(jù)。
在這里呢使用的就是elementUI的事件了，我們監(jiān)聽一下失去焦點的時候要觸發(fā)事件，同樣的我們要傳入進去$event參數(shù)
methods中編寫函數(shù)
這里使用的正則的意思代表的是（會正則的大佬就可以省略啦或者幫小弟看看不足之處）：
首先我們先看開頭的^和結(jié)尾的$這里分別代表匹配字符串的開頭以及匹配字符串的結(jié)尾，而[1-9]是代表的是匹配1-9其中的數(shù)字，所以會過濾掉負數(shù)和小數(shù)，同時要求開頭必須要以1開頭，后面的則是匹配以0-9結(jié)尾的數(shù)字，而*代表的是0次或多次，也就是不限制結(jié)尾的數(shù)字，合起來的意思就是：我們匹配從1-9中的某個數(shù)開頭，并且以0-9中的某個數(shù)結(jié)尾的匹配。最后呢就是做的判斷了，如果符合我們所定義的正則就不用提示錯誤了，如果不符合呢，就會提示錯誤，同時清空數(shù)據(jù)
下面這些內(nèi)容是后追加的：
方法三：利用ES6語法includes來規(guī)篩掉 . 和 -1.獲取到輸入框的值，對輸入框內(nèi)容進行檢索
var inputText = document.querySelector("#inputText")
inputText.addEventListener("input", function(){
if( this.value.includes(".")){
console.log("不能輸入小數(shù)點")
}else if(this.value.includes("-")){
console.log("不能輸入負數(shù)")
}else{
console.log("正常")
}
})
方法四：利用正則匹配出 . 或者 -
方法是和方法二一樣的，但是正則表達式則是：/^d+.d$/
let regx = /^d+.d+$/; let num_two = 1.252; const newNum_two = regx.test(num_two) console.log(newNum_two)
解釋：
`/^d+`：以任意一個數(shù)字開頭 +：出現(xiàn)一次或多次 `.`：第二位為小數(shù)點 `d+$` ：以任意一個數(shù)字結(jié)尾并且出現(xiàn)一次或多次
let regx_two = /^-d.?d*$/; let num_three = -2.53; const newNum_three = regx_two.test(num_three) console.log(newNum_three)
解釋：
`/^-`：以 - 號 開頭 `d`：第二位肯定是個數(shù)字 `.`：第三位可能會出現(xiàn)0次或者1次的 . `d*` 以數(shù)字 結(jié)尾出現(xiàn)0次或多次（這樣就可以如果輸入的單單是-2的話，也能匹配到）
OK分享到此結(jié)束，如果我之后還有什么辦法，再來分享給大家
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98444.html
摘要：我來打自己臉了剛剛發(fā)現(xiàn)在中文輸入法下是無效的有人能解決這個問題么如果要求只能輸入數(shù)字怎么做設(shè)置那我如果想限制長度，此時會失效，限制長度太麻煩了并且還存在的一個問題是，當輸入的是小數(shù)時，鼠標懸停在上會提示請輸入有效值，兩個最接近的值為和，這對 我來打自己臉了!!!!...剛剛發(fā)現(xiàn)在中文輸入法下是無效的,有人能解決這個問題么 如果要求input只能輸入數(shù)字怎么做？ 設(shè)置type=numbe...
Element是一套基于vue2.x的一個ui框架。官方文檔也很詳細，這里記錄一個element-ui日期插件的補充官方文檔中使用picker-options屬性來限制可選擇的日期，下面舉例補充： 單個日期時間輸入框 組件代碼： 情景1: 設(shè)置選擇今天以及今天之后的日期 data (){ return { pickerOptions0: { disabl...
摘要：手機郵箱正則近兩年出來很多新號碼，聽說什么的都有了導(dǎo)致以前的正則不能用了這就很難過，總是過一段時間出一種新號碼。因此，我決定使用返樸歸真的手機正則。，然后制定的語法里，輸入框里有符號的時候，為空。1.手機郵箱正則 近兩年出來很多新號碼，聽說199什么的都有了- -導(dǎo)致以前的正則不能用了....這就很難過，總是過一段時間出一種新號碼。因此，我決定使用返樸歸真的手機正則。 手機正則：var re...
摘要：限制輸入數(shù)字只能輸入正整數(shù)包括天解析事件在用戶輸入時觸發(fā)，元素值發(fā)生變化時立即觸發(fā)。加上，是為了適應(yīng)蘋果系統(tǒng)。限制輸入數(shù)字只能輸入小數(shù)點最多到第三位的數(shù)字解析加上括號即為分組，分組從左到右分別用來表示，每個括號為一組。 我們在做表單輸入時，有時候?qū)τ谟行┹斎氡容^有限制，比如輸入天數(shù)必須為正整數(shù)，再比如有些特殊需求需要輸入保留小數(shù)點的后面n位。那么我們?nèi)绾卧谳斎氕h(huán)節(jié)就限制用戶的輸入情況呢...
摘要：限制輸入數(shù)字只能輸入正整數(shù)包括天解析事件在用戶輸入時觸發(fā)，元素值發(fā)生變化時立即觸發(fā)。加上，是為了適應(yīng)蘋果系統(tǒng)。限制輸入數(shù)字只能輸入小數(shù)點最多到第三位的數(shù)字解析加上括號即為分組，分組從左到右分別用來表示，每個括號為一組。 我們在做表單輸入時，有時候?qū)τ谟行┹斎氡容^有限制，比如輸入天數(shù)必須為正整數(shù)，再比如有些特殊需求需要輸入保留小數(shù)點的后面n位。那么我們?nèi)绾卧谳斎氕h(huán)節(jié)就限制用戶的輸入情況呢...
閱讀 3597·2023-04-26 01:43
閱讀 2986·2021-10-14 09:42
閱讀 5480·2021-09-30 09:59
閱讀 2184·2021-09-04 16:40
閱讀 1222·2019-08-30 15:52
閱讀 840·2019-08-29 17:09
閱讀 2008·2019-08-26 13:37
閱讀 3443·2019-08-26 10:20
