国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

Vue中結(jié)合ElementUI實(shí)現(xiàn)：限制輸入框只能輸入正整數(shù)

iamyoung001 / 4027人閱讀

摘要：中結(jié)合實(shí)現(xiàn)限制輸入框只能輸入正整數(shù)如果覺(jué)得對(duì)您有所幫助，麻煩您動(dòng)動(dòng)您的小手指給點(diǎn)個(gè)贊唄中禁止輸入小數(shù)和負(fù)數(shù)只允許輸入正整數(shù)做法一利用禁止按鍵的方法，主要是依靠禁止按下減號(hào)以及小數(shù)點(diǎn)來(lái)完成的首先要監(jiān)聽(tīng)鍵盤(pán)按下事件，因?yàn)樯厦娴慕M件監(jiān)聽(tīng)事件是沒(méi)有

Vue中結(jié)合ElementUI實(shí)現(xiàn)：限制輸入框只能輸入正整數(shù)

如果覺(jué)得對(duì)您有所幫助，麻煩您動(dòng)動(dòng)您的小手指給點(diǎn)個(gè)贊唄(*^▽^*)

input中禁止輸入小數(shù)和負(fù)數(shù)（只允許輸入正整數(shù)） 做法一：利用禁止按鍵的方法，主要是依靠禁止按下減號(hào)以及小數(shù)點(diǎn)來(lái)完成的

首先要監(jiān)聽(tīng)keyup（鍵盤(pán)按下）事件，因?yàn)閑lementUi上面的input組件監(jiān)聽(tīng)事件是沒(méi)有這個(gè)事件的，所以可能會(huì)報(bào)錯(cuò)，所以我們需要加個(gè)vue事件的修飾符 .native，代表原生事件的意思。

然后我們傳個(gè)$event對(duì)象進(jìn)去來(lái)獲取原生的DOM（可以簡(jiǎn)單理解為觸發(fā)事件的本身）

接下來(lái)就是在methods中寫(xiě)這個(gè)函數(shù)了

具體的意思我已經(jīng)寫(xiě)在上面了，按下鍵后，可以自己彈出一下keynum和keychar所代表的的字符或者鍵盤(pán)碼，根據(jù)哪個(gè)判斷都可以，我選擇使用鍵盤(pán)碼來(lái)判斷
進(jìn)入判斷后我們就可以做交互了，我選擇清掉用戶所輸入的數(shù)據(jù)。

做法二：利用正則來(lái)規(guī)避掉小數(shù)點(diǎn)和負(fù)數(shù)

在這里呢使用的就是elementUI的事件了，我們監(jiān)聽(tīng)一下失去焦點(diǎn)的時(shí)候要觸發(fā)事件，同樣的我們要傳入進(jìn)去$event參數(shù)

methods中編寫(xiě)函數(shù)

這里使用的正則的意思代表的是（會(huì)正則的大佬就可以省略啦或者幫小弟看看不足之處）：
首先我們先看開(kāi)頭的^和結(jié)尾的$這里分別代表匹配字符串的開(kāi)頭以及匹配字符串的結(jié)尾，而[1-9]是代表的是匹配1-9其中的數(shù)字，所以會(huì)過(guò)濾掉負(fù)數(shù)和小數(shù)，同時(shí)要求開(kāi)頭必須要以1開(kāi)頭，后面的則是匹配以0-9結(jié)尾的數(shù)字，而*代表的是0次或多次，也就是不限制結(jié)尾的數(shù)字，合起來(lái)的意思就是：我們匹配從1-9中的某個(gè)數(shù)開(kāi)頭，并且以0-9中的某個(gè)數(shù)結(jié)尾的匹配。最后呢就是做的判斷了，如果符合我們所定義的正則就不用提示錯(cuò)誤了，如果不符合呢，就會(huì)提示錯(cuò)誤，同時(shí)清空數(shù)據(jù)

下面這些內(nèi)容是后追加的：

方法三：利用ES6語(yǔ)法includes來(lái)規(guī)篩掉 . 和 -

1.獲取到輸入框的值，對(duì)輸入框內(nèi)容進(jìn)行檢索

var inputText = document.querySelector("#inputText")

    inputText.addEventListener("input", function(){
        if( this.value.includes(".")){
            console.log("不能輸入小數(shù)點(diǎn)")
        }else if(this.value.includes("-")){
            console.log("不能輸入負(fù)數(shù)")
        }else{
            console.log("正常")
        }
    })
方法四：利用正則匹配出 . 或者 -

方法是和方法二一樣的，但是正則表達(dá)式則是：/^d+.d$/

附上兩個(gè)實(shí)例：
let regx = /^d+.d+$/;
let num_two = 1.252;
const newNum_two = regx.test(num_two)
console.log(newNum_two)

解釋?zhuān)?/p> 

`/^d+`：以任意一個(gè)數(shù)字開(kāi)頭 +：出現(xiàn)一次或多次
`.`：第二位為小數(shù)點(diǎn)
`d+$` ：以任意一個(gè)數(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)

解釋?zhuān)?/p> 

`/^-`：以 - 號(hào) 開(kāi)頭
`d`：第二位肯定是個(gè)數(shù)字
`.`：第三位可能會(huì)出現(xiàn)0次或者1次的 .
`d*` 以數(shù)字 結(jié)尾出現(xiàn)0次或多次（這樣就可以如果輸入的單單是-2的話，也能匹配到）

OK分享到此結(jié)束，如果我之后還有什么辦法，再來(lái)分享給大家

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/98444.html

相關(guān)文章

  • input框只允許輸入正整數(shù)、正數(shù)(包含小數(shù))的解決方法 vue.js實(shí)現(xiàn)

    摘要：我來(lái)打自己臉了剛剛發(fā)現(xiàn)在中文輸入法下是無(wú)效的有人能解決這個(gè)問(wèn)題么如果要求只能輸入數(shù)字怎么做設(shè)置那我如果想限制長(zhǎng)度，此時(shí)會(huì)失效，限制長(zhǎng)度太麻煩了并且還存在的一個(gè)問(wèn)題是，當(dāng)輸入的是小數(shù)時(shí)，鼠標(biāo)懸停在上會(huì)提示請(qǐng)輸入有效值，兩個(gè)最接近的值為和，這對(duì) 我來(lái)打自己臉了!!!!...剛剛發(fā)現(xiàn)在中文輸入法下是無(wú)效的,有人能解決這個(gè)問(wèn)題么 如果要求input只能輸入數(shù)字怎么做？ 設(shè)置type=numbe...

    el09xccxy 評(píng)論0 收藏0

  • ElementUI日期選擇器時(shí)間選擇范圍限制

    Element是一套基于vue2.x的一個(gè)ui框架。官方文檔也很詳細(xì)，這里記錄一個(gè)element-ui日期插件的補(bǔ)充官方文檔中使用picker-options屬性來(lái)限制可選擇的日期，下面舉例補(bǔ)充： 單個(gè)日期時(shí)間輸入框 組件代碼： 情景1: 設(shè)置選擇今天以及今天之后的日期 data (){ return { pickerOptions0: { disabl...

    liangzai_cool 評(píng)論0 收藏0

  • 項(xiàng)目小結(jié)：手機(jī)郵箱正則，URL各種判斷返回頁(yè)面，input輸入框輸入符合卻獲取不到問(wèn)題

    摘要：手機(jī)郵箱正則近兩年出來(lái)很多新號(hào)碼，聽(tīng)說(shuō)什么的都有了導(dǎo)致以前的正則不能用了這就很難過(guò)，總是過(guò)一段時(shí)間出一種新號(hào)碼。因此，我決定使用返樸歸真的手機(jī)正則。，然后制定的語(yǔ)法里，輸入框里有符號(hào)的時(shí)候，為空。1.手機(jī)郵箱正則 近兩年出來(lái)很多新號(hào)碼，聽(tīng)說(shuō)199什么的都有了- -導(dǎo)致以前的正則不能用了....這就很難過(guò)，總是過(guò)一段時(shí)間出一種新號(hào)碼。因此，我決定使用返樸歸真的手機(jī)正則。 手機(jī)正則：var re...

    番茄西紅柿 評(píng)論0 收藏0

  • 限制input輸入小數(shù)只能到3位或者只能輸入正整數(shù)(兼容ios)

    摘要：限制輸入數(shù)字只能輸入正整數(shù)包括天解析事件在用戶輸入時(shí)觸發(fā)，元素值發(fā)生變化時(shí)立即觸發(fā)。加上，是為了適應(yīng)蘋(píng)果系統(tǒng)。限制輸入數(shù)字只能輸入小數(shù)點(diǎn)最多到第三位的數(shù)字解析加上括號(hào)即為分組，分組從左到右分別用來(lái)表示，每個(gè)括號(hào)為一組。 我們?cè)谧霰韱屋斎霑r(shí)，有時(shí)候?qū)τ谟行┹斎氡容^有限制，比如輸入天數(shù)必須為正整數(shù)，再比如有些特殊需求需要輸入保留小數(shù)點(diǎn)的后面n位。那么我們?nèi)绾卧谳斎氕h(huán)節(jié)就限制用戶的輸入情況呢...

    zone 評(píng)論0 收藏0

  • 限制input輸入小數(shù)只能到3位或者只能輸入正整數(shù)(兼容ios)

    摘要：限制輸入數(shù)字只能輸入正整數(shù)包括天解析事件在用戶輸入時(shí)觸發(fā)，元素值發(fā)生變化時(shí)立即觸發(fā)。加上，是為了適應(yīng)蘋(píng)果系統(tǒng)。限制輸入數(shù)字只能輸入小數(shù)點(diǎn)最多到第三位的數(shù)字解析加上括號(hào)即為分組，分組從左到右分別用來(lái)表示，每個(gè)括號(hào)為一組。 我們?cè)谧霰韱屋斎霑r(shí)，有時(shí)候?qū)τ谟行┹斎氡容^有限制，比如輸入天數(shù)必須為正整數(shù)，再比如有些特殊需求需要輸入保留小數(shù)點(diǎn)的后面n位。那么我們?nèi)绾卧谳斎氕h(huán)節(jié)就限制用戶的輸入情況呢...

    chunquedong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<