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","订单总价请输入正整数或者小数数字");
}
相关推荐
梦想CAD控件1 分钟前
网页CAD中组(Group)功能的二次开发
前端·javascript·github
讨厌吃蛋黄酥2 分钟前
🔥 JavaScript异步之谜:单线程如何实现“同时”做多件事?99%的人都理解错了!
前端·javascript·面试
华仔啊10 分钟前
别再纠结Pinia和Vuex了!一篇文章彻底搞懂区别与选择
前端·vue.js
徐同保38 分钟前
Redux和@reduxjs/toolkit同时在Next.js项目中使用
开发语言·前端·javascript
~无忧花开~42 分钟前
CSS学习笔记(二):CSS动画核心属性全解析
开发语言·前端·css·笔记·学习·css3·动画
渣哥43 分钟前
Spring Boot 本质揭秘:约定优于配置 + 自动装配
javascript·后端·面试
颜酱1 小时前
了解 pnpm 的优势,然后将已有项目的 yarn 换成 pnpm
前端·javascript·前端工程化
海在掘金611271 小时前
从"鬼知道这对象有啥"到"一目了然" - TS接口的实战魔力
前端
spionbo1 小时前
Vue 模拟键盘组件封装方法与使用技巧详解
前端
泉城老铁1 小时前
springboot 对接发送钉钉消息,消息内容带图片
前端·spring boot·后端