vue指令只能輸入正數(shù)并且只能輸入一個(gè)小數(shù)點(diǎn)

rubyshen 發(fā)布于2019-08-26 12:01 / 2032人閱讀

摘要：最近在做一個(gè)金額查詢，驗(yàn)證的時(shí)候總是出現(xiàn)很多問題，如輸入號后，框里是沒有了，但是在里還是綁定了，提交的時(shí)候就會報(bào)錯(cuò)，真的是讓人很是郁悶，小數(shù)點(diǎn)也是框過濾掉了，但是提交的時(shí)候也會出現(xiàn)。

最近在做一個(gè)金額查詢，驗(yàn)證的時(shí)候總是出現(xiàn)很多問題，如輸入-號后，input框里是沒有了，但是在model里還是綁定了，提交的時(shí)候就會報(bào)錯(cuò)，真的是讓人很是郁悶，小數(shù)點(diǎn)也是input框過濾掉了，但是提交的時(shí)候也會出現(xiàn)。不過經(jīng)過努力終于找到了一種解決方案，在這里``和大家分享一下下。

Vue.directive("numbers", {
  bind: function (el, binding) {
    console.log("ere")
  },
  inserted: function (el) {
    // el.querySelector("input").blur(console.log("etset"))
  },
  update: function (el, binding, vnode, oldVnode) {
    console.log("vnode", vnode)
    let express = vnode.data.directives[1].expression
    // let value = el.querySelector("input").value
    let value = vnode.data.directives[1].value
    if (typeof value === "string") {} //在重置的時(shí)候清空
    if (value.split(".").length - 1 > 1) {
      value = value.replace(/.{2,}/g, "") // 只保留第一個(gè). 清除多余的
      value = value.replace(".", "$#$").replace(/./g, "").replace("$#$", ".")
    }
    let repeatValue = value.replace(/[^d.]/g, "")
    // setTimeout(() => {
    //   el.querySelector("input").value = repeatValue
    // }, 5)
    setValueWithExpressionVue(vnode.context.$data, express, repeatValue)
  },
  componentUpdated: function () {},
  unbind: function (el) {}
})

// 
function setValueWithExpressionVue (currObj, expression, value) {
  expression = expression.split(".")
  expression.forEach(function (arg, i) {
    if (i < expression.length - 1) {
      currObj = currObj[arg]
    } else {
      currObj[arg] = value
    }
  })
}

放到main.js里就好了，不過這個(gè)方法只能用在ivew中，平時(shí)我們經(jīng)常會遇到該類型得問題。
我在后來用element-ui時(shí)輸入框得驗(yàn)證中，這個(gè)方法是不能用的
該文章去年發(fā)布，一直更新不上不去，可能文章文字太少得緣故吧

GPU云服務(wù)器云服務(wù)器 js只能輸入小數(shù) js只能輸入數(shù)據(jù) Js只能輸入整數(shù) asp只能輸入數(shù)字

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

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

相關(guān)文章

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

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

el09xccxy 2019-08-23 11:51 評論0 收藏0
Vue中結(jié)合ElementUI實(shí)現(xiàn)：限制輸入框只能輸入正整數(shù)

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

iamyoung001 2019-08-23 12:24 評論0 收藏0
基于PHP/CURL/codeIgniter的Spider Webbot爬蟲[7]常用正則表達(dá)式

摘要：驗(yàn)證是否含有等字符只能輸入漢字驗(yàn)證地址驗(yàn)證驗(yàn)證電話號碼正確格式為，，，，，。驗(yàn)證身份證號位或位數(shù)字驗(yàn)證一年的個(gè)月正確格式為和驗(yàn)證一個(gè)月的天正確格式為和。一、校驗(yàn)數(shù)字的表達(dá)式 1 數(shù)字：^[0-9]*$ 2 n位的數(shù)字：^d{n}$ 3 至少n位的數(shù)字：^d{n,}$ 4 m-n位的數(shù)字：^d{m,n}$ 5 零和非零開頭的數(shù)字：^(0|1-9*)$ 6 非零開頭的最多帶兩位小數(shù)的數(shù)字...

wow_worktile 2019-07-01 14:10 評論0 收藏0
element el-input directive數(shù)字

摘要：使用自定義指令格式化背景使用開發(fā)的過程中遇到循環(huán)的數(shù)據(jù)只能輸入數(shù)字，并且有不要小數(shù)點(diǎn)，有需要小數(shù)點(diǎn)的使用進(jìn)行控制開發(fā)頁面使用方式為保留幾位小數(shù)因?yàn)橛玫氖堑模M件外層包著一層所以要使用獲取對其監(jiān)聽失使用自定義指令格式化el-input 背景使用element開發(fā)的過程中遇到循環(huán)的數(shù)據(jù)只能輸入數(shù)字，并且有不要小數(shù)點(diǎn)，有需要小數(shù)點(diǎn)的使用vue directive 進(jìn)行控制showImg(...

nifhlheimr 2019-08-23 12:17 評論0 收藏0
數(shù)字在JavaScript中是如何編譯的

摘要：數(shù)字?jǐn)?shù)字都是浮點(diǎn)數(shù)，按照標(biāo)準(zhǔn)進(jìn)行存儲。因此，只有偶數(shù)可以在范圍內(nèi)表示。但只有超過指數(shù)的上限才稱為中的溢出。結(jié)論在這篇博文中，我們研究了如何將其浮點(diǎn)數(shù)轉(zhuǎn)換為位。 JavaScript中的所有數(shù)字都是浮點(diǎn)數(shù)。這篇博客文章解釋了這些浮點(diǎn)數(shù)如何在64位二進(jìn)制內(nèi)部表示。由于特別考慮，本文中的數(shù)字將用整數(shù)表示，以便在閱讀本文后，您將了解在以下交互中會發(fā)生什么：（譯者注：浮點(diǎn)數(shù)并不一定等于小數(shù)，定...

Moxmi 2019-08-22 17:15 評論0 收藏0