解决input输入框仅支持输入数字及两位小数点的限制
作者: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输入框小数点位数的资料请关注脚本之家其它相关文章!