[教程]input输入框仅支持输入数字及两位小数点解决

input输入后即时从接口获取数据的验证（仅支持输入数字及两位小数点的数字）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的校验规则进行判断，通过初步校验规则后，调用计算函数（后端请求），在此函数内进行判断，如果判断不通过就报提示，如果通过判断再发请求。获取数据

• 两层规则处理，实际过程中只有通过该规则后才能发送请求