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

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

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

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

  • input输入后将输入内容传给后端,并且即时从后端拿到计算后的数值

问题及难点

  • 输入框内容是否符合后端要求规范(如果不符合规范发请求会报400)
  • 前端做数据验证

解决方案

<!-- 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>

基本逻辑

  • 监听输入内容,初步通过elementui的校验规则进行判断,通过初步校验规则后,调用计算函数(后端请求),在此函数内进行判断,如果判断不通过就报提示,如果通过判断再发请求。获取数据
  • 两层规则处理,实际过程中只有通过该规则后才能发送请求

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

相关文章

  • 微信小程序实现多行文字滚动效果

    微信小程序实现多行文字滚动效果

    这篇文章主要介绍了微信小程序实现多行文字滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • uniapp实现微信小程序一键登录功能

    uniapp实现微信小程序一键登录功能

    这篇文章给大家介绍了uniapp实现微信小程序一键登录功能,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2024-10-10
  • 如何制作浮动广告 JavaScript制作浮动广告代码

    如何制作浮动广告 JavaScript制作浮动广告代码

    如果有一定的JavaScript基础,制作浮动广告还是比较容易的,利用闲暇时间简单制作了一个,感兴趣的朋友可以参考下哦
    2012-12-12
  • 原生JS实现随机点名项目的实例代码

    原生JS实现随机点名项目的实例代码

    这篇文章主要介绍了原生JS实现随机点名项目的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-04-04
  • JS获取本地文件并进行网络传输的代码详解

    JS获取本地文件并进行网络传输的代码详解

    在web中如想要获取用户计算机上的文件我们通常会用到的方法是通过一个表单元素<input type="file">操作用户选择的文件,本文小编给大家介绍了JS获取本地文件并进行网络传输的方法,需要的朋友可以参考下
    2024-08-08
  • ES6新特性六:promise对象实例详解

    ES6新特性六:promise对象实例详解

    这篇文章主要介绍了ES6新特性之promise对象,结合实例形式详细分析了promise对象的功能、状态、使用方法与相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • javascript表单验证大全

    javascript表单验证大全

    JavaScript是用来在数据被传输到服务前对html表单中输入的数据进行验证,使用javascript对用户输入的信息进行验证是项目必须的,下面小编给大家整理一些比较常用的javascript表单验证,需要的朋友可以参考下
    2015-08-08
  • js中textContent、innerText和innerHTML的用法以及区别

    js中textContent、innerText和innerHTML的用法以及区别

    这篇文章主要介绍了JavaScript中textContent、innerText和innerHTML的用法以及区别,需要的朋友可以参考下
    2023-05-05
  • 关于微信小程序自定义tabbar问题详析

    关于微信小程序自定义tabbar问题详析

    微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验,下面这篇文章主要给大家介绍了关于微信小程序自定义tabbar问题的相关资料,需要的朋友可以参考下
    2022-04-04
  • JS面试之console的异步性怎么理解详解

    JS面试之console的异步性怎么理解详解

    这篇文章主要为大家介绍了JS面试之console的异步性怎么理解详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10

最新评论