解决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输入框小数点位数的资料请关注脚本之家其它相关文章!

相关文章

  • JavaScript让网页出现渐隐渐显背景颜色的方法

    JavaScript让网页出现渐隐渐显背景颜色的方法

    这篇文章主要介绍了JavaScript让网页出现渐隐渐显背景颜色的方法,涉及javascript操作样式的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 解决LayUI表单获取不到data的问题

    解决LayUI表单获取不到data的问题

    今天小编就为大家分享一篇解决LayUI表单获取不到data的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • JavaScript四种调用模式和this示例介绍

    JavaScript四种调用模式和this示例介绍

    JavaScript调用时除了声明时定义的形参外,每个函数接受两个附加参数:this 和arguments,下面为大家介绍下JavaScript四种调用模式和this
    2014-01-01
  • 网站页面自动跳转实现方法PHP、JSP(下)

    网站页面自动跳转实现方法PHP、JSP(下)

    很多时候我们需要Web页具备有自动跳转功能,例如,论坛中的用户登录、发帖及回复或留言簿中的留言和回复等操作成功后,若用户没有任何鼠标点击操作,过了一定的时间,页面自动跳转到预设的页面。
    2010-08-08
  • 浅谈js中的延迟执行和定时执行

    浅谈js中的延迟执行和定时执行

    下面小编就为大家带来一篇浅谈js中的延迟执行和定时执行。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JS实现深拷贝的几种方法介绍

    JS实现深拷贝的几种方法介绍

    这篇文章介绍了JS实现深拷贝的几种方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • bootstrap 模态框(modal)实现水平垂直居中显示

    bootstrap 模态框(modal)实现水平垂直居中显示

    这篇文章主要为大家详细介绍了bootstrap 模态框modal实现水平垂直居中显示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 使用JavaScript实现ajax的实例代码

    使用JavaScript实现ajax的实例代码

    实现ajax之前必须要创建一个 XMLHttpRequest 对象。这是必须的。那么对使用js实现ajax的代码感兴趣的朋友可以参考下本文
    2016-05-05
  • Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法

    Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法

    本文主要介绍了Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法。具有一定的参考价值,下面跟着小编一起来看下吧
    2016-12-12
  • JS实现的全排列组合算法示例

    JS实现的全排列组合算法示例

    这篇文章主要介绍了JS实现的全排列组合算法,简单描述了全排列组合算法的原理并结合实例形式给出了全排列组合算法的具体实现技巧,需要的朋友可以参考下
    2017-10-10

最新评论