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","订单总价请输入正整数或者小数数字");
}

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