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

解決input輸入框僅支持輸入數(shù)字及兩位小數(shù)點(diǎn)的限制

 更新時(shí)間:2023年11月29日 10:50:54   作者:HUMILITY  
這篇文章主要為大家介紹了解決input輸入框僅支持輸入數(shù)字及兩位小數(shù)點(diǎn)的限制技巧示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

nput輸入后即時(shí)從接口獲取數(shù)據(jù)的驗(yàn)證

(僅支持輸入數(shù)字及兩位小數(shù)點(diǎn)的數(shù)字)

  • input輸入后將輸入內(nèi)容傳給后端,并且即時(shí)從后端拿到計(jì)算后的數(shù)值

問題及難點(diǎn)

  • 輸入框內(nèi)容是否符合后端要求規(guī)范(如果不符合規(guī)范發(fā)請(qǐng)求會(huì)報(bào)400)
  • 前端做數(shù)據(jù)驗(yàn)證

解決方案

<!-- vue及elementUI -->
<!-- v-model監(jiān)聽數(shù)據(jù)內(nèi)容及校驗(yàn)規(guī)則 -->
<!-- elementUI已按規(guī)定寫好 -->
<el-input  v-model="ruleForm.computeFun" @blur="computeCash"> </el-input>
<p>{{ ruleform.numCompute }}</p>
<script>
return{
  ruleForm:{
      numCompute: ''
  },
  rules:{
      computeFun:[
          { type: 'string', required: true, message: '請(qǐng)輸入保留兩位小數(shù)的金額' },
          { validator: (rule, value, callback) => {
          // 保留兩位小數(shù)驗(yàn)證
          if (!/^\d+(\.\d{1,2})?$/.test(value)) {
            callback(new Error('必須輸入數(shù)字,且最多保留兩位小數(shù)'))
          } else if (value > 10000000) {
            callback(new Error('不允許大于1000000'))
          } else {
            callback()
          }
        },
        trigger: 'blur'
        }
      ]}
},
methods:{
  async computeCash () {
      if (this.ruleForm.numCompute <1000000 && /^\d+(\.\d{1,2})?$/.test(this.ruleForm.numCompute)){
         //發(fā)請(qǐng)求的參數(shù)
         axios.xxx().then()
         this.ruleForm.numCompute = 后端拿到的數(shù)據(jù)進(jìn)行處理(比如單位)
      } else {
          this.$notify({
              title: '提示‘,
              message: '必須輸入小于1000000且符合規(guī)則的數(shù)據(jù)',
              type: 'warning'
          })
      }
  }
}
}
</script>

基本邏輯

  • 監(jiān)聽輸入內(nèi)容,初步通過elementui的校驗(yàn)規(guī)則進(jìn)行判斷,通過初步校驗(yàn)規(guī)則后,調(diào)用計(jì)算函數(shù)(后端請(qǐng)求),在此函數(shù)內(nèi)進(jìn)行判斷,如果判斷不通過就報(bào)提示,如果通過判斷再發(fā)請(qǐng)求。獲取數(shù)據(jù)
  • 兩層規(guī)則處理,實(shí)際過程中只有通過該規(guī)則后才能發(fā)送請(qǐng)求

以上就是解決input輸入框僅支持輸入數(shù)字及兩位小數(shù)點(diǎn)的限制的詳細(xì)內(nèi)容,更多關(guān)于input輸入框小數(shù)點(diǎn)位數(shù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評(píng)論