javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > input输入框小数点位数

解决input输入框仅支持输入数字及两位小数点的限制

作者:HUMILITY

这篇文章主要为大家介绍了解决input输入框仅支持输入数字及两位小数点的限制技巧示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

nput输入后即时从接口获取数据的验证

(仅支持输入数字及两位小数点的数字)

问题及难点

解决方案

<!-- vue及elementUI -->
<!-- v-model监听数据内容及校验规则 -->
<!-- elementUI已按规定写好 -->
<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: '请输入保留两位小数的金额' },
          { validator: (rule, value, callback) => {
          // 保留两位小数验证
          if (!/^\d+(\.\d{1,2})?$/.test(value)) {
            callback(new Error('必须输入数字,且最多保留两位小数'))
          } 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)){
         //发请求的参数
         axios.xxx().then()
         this.ruleForm.numCompute = 后端拿到的数据进行处理(比如单位)
      } else {
          this.$notify({
              title: '提示‘,
              message: '必须输入小于1000000且符合规则的数据',
              type: 'warning'
          })
      }
  }
}
}
</script>

基本逻辑

以上就是解决input输入框仅支持输入数字及两位小数点的限制的详细内容,更多关于input输入框小数点位数的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文