vue实现表单输入框数字类型校验功能

vue实现表单输入框数字类型校验功能

1. 样式代码

html 复制代码
<el-form-item label="订单总价">
  <el-input   size="small" v-model="form.totalPrice" placeholder="请输入订单总价 正整数或者2位数小数"  @input="check(form.totalPrice)"></el-input>
</el-form-item>

在HTML表单里使用 input事件来监听输入值的变化,一单数据变化,就触发校验规则。输入框输入的类型 都是字符串类型,要把字符串转换成数字类型。

在HTML中,无论是原生的input元素还是Element UI的el-input组件,当用户在输入框中输入数字时,这些输入值默认会被当作字符串类型处理。

2 methods 正则表达式校验输入的值

//正则表达式校验订单价格输入的值
check(value) {
  const Regex = /^\d+(\.\d{1,2})?$/;
  if (!Regex.test(value)) {
    this.$notify.warning("订单总价请输入正整数或者2位数小数")
  }
},

但是 监听校验 只是对输入值校验,如果用户不听提示,执意提交非数字类型的,还是能提交到后台,导致后台因为字段类型不同而报错。

所以input事件校验可以不要。

报错信息如下:

java 复制代码
JSON parse error: Cannot deserialize value of type `java.lang.Double` from String "十": not a valid Double value; nested exception is com.fasterxml.jackson.databind.exc.InvalidFormatException: Cannot deserialize value of type `java.lang.Double` from String "十": not a valid Double value

3 提交订单时 再校验 如果校验不通过不允许提交表单

3.1 使用vue方法校验

在methods 提交表单的函数,在调后端接口前做校验

vue 复制代码
save(){
let b = this.checkDataType(Number(this.form.totalPrice));
 if (!b) {
   this.$notify.warning("订单总价输入的不是数字,请输入数字")
   return;
 }
//下面调接口提交表单 省略
}

下面的方法复制到methods 用于校验一个变量是否是数字类型,如果是非数字会返回false,如果是小数或者整数返回true

vue 复制代码
//校验订单总价输入的类型
checkDataType(variable) {
  if (typeof variable === 'number') {
    return Number.isInteger(variable) || Number.isFinite(variable) && variable % 1 !== 0;
  } else {
   return false;
  }
},

3.2 再次使用正则表达式校验

所以input事件校验可以不要,但是提交时的校验一定要有,这样才能保证前端传到后台的数据跟实体类的字段类型一致的。

vue 复制代码
 save(){
    let b = this.check(this.form.totalPrice);
     if (!b) {
       this.$notify.warning("订单总价输入的不是数字,请输入数字")
       return;
     }
}
vue 复制代码
//正则表达式校验订单价格输入的值
check(value) {
  const Regex = /^\d+(\.\d{1,2})?$/;
  if (Regex.test(value)) {
    return true
  } else {
    return false
  }
},

其他方法:

1.v-model.number

elmentUI 提供的数字字符串转换为数字类型,以下是一个使用Element UI的el-input组件并转换输入值为数字类型的示例:

html 复制代码
html<template>
  <el-form>
    <el-form-item label="输入框">
      <el-input v-model.number="inputValue" @input="handleInput"></el-input>
    </el-form-item>
  </el-form>
</template>

但是,使用方式时,无法输入小数点。可能是我方式不对,铁们,可以尝试一下这种,这种可以的话是比价简单的。

2.InputNumber 计数器

在Element UI中,el-input-number组件是一个专门用于输入和显示数字的计数器。它提供了对数字输入的内置验证和控制,包括限制输入范围、步长等。

:precision="2" precision 的值必须是一个非负整数,并且不能小于 step 的小数位数。调整精度位数

:step="0.1" 点击加减符号时增减的数值

html 复制代码
<template>
  <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num: 1
      }
    }
  };
</script>

后端数据类型的获取和校验

前端比较校验传过来的数据必须是数字类型,才不会报错。不然虽然后端加上校验代码也是会报错的的。

这是因为 前端调用接口时,把数据传到后端Spring MVC框架会尝试将请求参数转换为相应的方法参数类型。如果数据类型不匹配或无法转换,Spring会抛出MethodArgumentTypeMismatchException异常。

但这并不意味着后端可以完全依赖于这种自动类型转换和异常处理来进行数据校验。因为用户可能绕过前端校验直接向后端发送请求。因此,后端需要进行数据校验以确保接收到的数据是合法和安全的。

java 复制代码
//校验订单总价输入的必须是正整数或者正小数类型
Class<PurchaseOrder> purchaseOrderClass = PurchaseOrder.class;
Field totalPriceField = purchaseOrderClass.getDeclaredField("totalPrice");
Class<?> type = totalPriceField.getType();
if (!(type.equals(Integer.class) || type.equals(Double.class))){
    throw new CustomException("-1","订单总价请输入正整数或者小数数字");
}
相关推荐
别拿曾经看以后~12 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死15 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试18 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人26 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人27 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR32 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香34 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969337 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai42 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter