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","订单总价请输入正整数或者小数数字");
}
相关推荐
前端拾光者10 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_1817901448028 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome