乐趣区

关于javascript:input输入框仅支持输入数字及两位小数点解决

input 输出后即时从接口获取数据的验证(仅反对输出数字及两位小数点的数字)

  • 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 的校验规定进行判断,通过初步校验规定后,调用计算函数(后端申请),在此函数内进行判断,如果判断不通过就报提醒,如果通过判断再发申请。获取数据
  • 两层规定解决,理论过程中只有通过该规定后能力发送申请
退出移动版