表单验证、正则表达式---最大限制9999.99

已于 2024-01-17 20:21:55 修改
阅读量2.2k 收藏 5
点赞数 1
文章标签： 前端
于 2022-05-06 11:18:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44870969/article/details/124583712
版权
本文详细介绍了在前端开发中如何实现各种表单字段的验证，包括巷道名称、巷道长度等，涉及字符限制、特殊字符检查及数字格式校验。同时，给出了完整的Vue.js组件代码示例，展示了如何结合 Vuex 进行数据管理，并提供了一个用于编辑设备信息的表单组件。该组件包含了月份选择、巷道信息、长度限制等关键字段的输入与验证，确保了数据输入的准确性和规范性。
摘要由CSDN通过智能技术生成

在这里插入图片描述

可输入汉字、英文、数字，最多30个字符(不包含特殊字符)

systemType: [
  {
    type: "string",
    required: true,
    message: "请输入巷道名称",
    trigger: "change",
  },
  {
    min: 1,
    max: 30,
    message: "长度在 1 到 30 个字符",
    trigger: "change",
  },
  {
    required: true,
    message: "不能包含特殊字符",
    trigger: "change",
    pattern: /^[\u4E00-\u9FA5a-zA-Z0-9]{1,30}$/,
  },
],

可输入数字，小数点后保留2位，最大9999.99

{
 required: true,
 message: "请输入巷道长度",
 trigger: "change",
},
{
  required: true,
  message: "最多两位小数",
  trigger: "change",
  pattern:  /^(\d+)(.\d{0,2})?$/,
},
{
  required: true,
  message: "最大限制9999.99",
  trigger: "change",
  pattern: /^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/,
},

可输入汉字、英文、数字、特殊符号，最多200个字符

 {
   type: "string",
    required: true,
    message: "请输入地质情况",
    trigger: "change",
  },
  {
    min: 1,
    max: 200,
    message: "长度在 1 到 200 个字符",
    trigger: "change",
  },

全部代码

<template>
  <div class="add-device-box" @click.self="close">
    <div class="add-device">
      <div class="head">{{ title }}</div>
      <div class="main">
        <el-form
          ref="ruleForm"
          label-width="110px"
          size="medium"
          :inline="true"
          :rules="rules"
          :model="paramsData"
          class="demo-form-inline"
        >
          <el-form-item
            label="月份"
            prop="sensorName"
            style="margin-right: 50px"
          >
            <el-date-picker
              v-model="paramsData.sensorName"
              type="month"
              placeholder="请选择月份"
            />
          </el-form-item>
          <el-form-item label="巷道名称" prop="systemType">
            <el-input
              v-model="paramsData.systemType"
              placeholder="请输入巷道名称"
            />
          </el-form-item>
          <el-form-item label="开始点位名称" prop="monitorType">
            <el-input
              v-model="paramsData.monitorType"
              placeholder="请输入开始点位名称"
            />
          </el-form-item>
          <el-form-item label="结束点位名称" prop="sensorIp">
            <el-input
              v-model="paramsData.sensorIp"
              placeholder="请输入结束点位名称"
            />
          </el-form-item>
          <el-form-item label="巷道长度" prop="sensorPosition">
            <el-input
              v-model="paramsData.sensorPosition"
              placeholder="请输入巷道长度"
              type="number"
            >
              <i slot="suffix" style="margin-right: 10px;color:#3370c2">m</i>
            </el-input>
          </el-form-item>
          <el-form-item label="设计长度" prop="workingFaceName">
            <el-input
              v-model="paramsData.workingFaceName"
              placeholder="请输入设计长度"
              type="number"
            >
              <i slot="suffix" style="margin-right: 10px;color:#3370c2">m</i>
            </el-input>
          </el-form-item>
          <el-form-item label="已施工长度" prop="department">
            <el-input
              v-model="paramsData.department"
              placeholder="请输入已施工长度"
              type="number"
            >
              <i slot="suffix" style="margin-right: 10px;color:#3370c2">m</i>
            </el-input>
          </el-form-item>
          <el-form-item label="剩余长度" prop="leader">
            <el-input
              v-model="paramsData.leader"
              placeholder="请输入剩余长度"
              type="number"
            >
              <i slot="suffix" style="margin-right: 10px;color:#3370c2">m</i>
            </el-input>
          </el-form-item>
          <el-form-item label="地质情况" prop="qk" class="inner">
            <el-input v-model="paramsData.qk" placeholder="请输入地质情况" />
          </el-form-item>
        </el-form>
      </div>
      <div class="footer">
        <button class="_confirm" @click="confirm('ruleForm')">确定</button>
        <span style="width: 40px" />
        <button class="_confirm" @click="close">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getAllSystemTypes } from "@/api/monitor";
import moment from "moment";
import { getData, week } from "@/views/dispatch/common";
export default {
  props: {
    editdata: {
      type: Object,
      default: () => null,
    },
    workList: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: () => "编辑设备",
    },
  },
  data() {
    return {
      paramsData: {
        systemType: "",
        monitorType: "",
        sensorIp: "",
        workingFaceName: "",
        qk: "",
        sensorName: "",
      },
      value: "",
      list: [],
      monthList: [],
      getData,
      submit: false,
      userNameMsg: "",
      monitorTypesList: [],
      systemTypesList: [],
      workingFaceName: "",
      name: "",
      jobNumber: "",
      rules: {
        sensorName: [
          { required: true, message: "请选择月份", trigger: "change" },
        ],
        systemType: [
          {
            type: "string",
            required: true,
            message: "请输入巷道名称",
            trigger: "change",
          },
          {
            min: 1,
            max: 30,
            message: "长度在 1 到 30 个字符",
            trigger: "change",
          },
          {
            required: true,
            message: "不能包含特殊字符",
            trigger: "change",
            pattern: /^[\u4E00-\u9FA5a-zA-Z0-9]{1,30}$/,
          },
        ],
        monitorType: [
          {
            type: "string",
            required: true,
            message: "请输入开始点位名称",
            trigger: "change",
          },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "change",
          },
          {
            required: true,
            message: "不能包含特殊字符",
            trigger: "change",
            pattern: /^[\u4E00-\u9FA5a-zA-Z0-9]{1,20}$/,
          },
        ],
        sensorIp: [
          {
            type: "string",
            required: true,
            message: "请输入结束点位名称",
            trigger: "change",
          },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "change",
          },
          {
            required: true,
            message: "不能包含特殊字符",
            trigger: "change",
            pattern: /^[\u4E00-\u9FA5a-zA-Z0-9]{1,20}$/,
          },
        ],
        sensorPosition: [
          {
            required: true,
            message: "请输入巷道长度",
            trigger: "change",
          },
          {
            required: true,
            message: "最多两位小数",
            trigger: "change",
            pattern: /^(\d+)(.\d{0,2})?$/,
          },
          {
            required: true,
            message: "最大限制9999.99",
            trigger: "change",
            pattern: /^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/,
          },
        ],
        workingFaceName: [
          {
            required: true,
            message: "请输入设计长度",
            trigger: "change",
          },
          {
            required: true,
            message: "最多两位小数",
            trigger: "change",
            pattern: /^(\d+)(.\d{0,2})?$/,
          },
          {
            required: true,
            message: "最大限制9999.99",
            trigger: "change",
            pattern: /^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/,
          },
        ],
        department: [
          {
            required: true,
            message: "请输入已施工长度",
            trigger: "change",
          },
          {
            required: true,
            message: "最多两位小数",
            trigger: "change",
            pattern: /^(\d+)(.\d{0,2})?$/,
          },
          {
            required: true,
            message: "最大限制9999.99",
            trigger: "change",
            pattern: /^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/,
          },
        ],
        leader: [
          {
            required: true,
            message: "请输入剩余长度",
            trigger: "change",
          },
          {
            required: true,
            message: "最多两位小数",
            trigger: "change",
            pattern: /^(\d+)(.\d{0,2})?$/,
          },
          {
            required: true,
            message: "最大限制9999.99",
            trigger: "change",
            pattern: /^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/,
          },
        ],
        qk: [
          {
            type: "string",
            required: true,
            message: "请输入地质情况",
            trigger: "change",
          },
          {
            min: 1,
            max: 200,
            message: "长度在 1 到 200 个字符",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState("settings", ["workingList"]),
    roleList() {
      return this.rolelist.slice(1);
    },
  },
  mounted() {
    this.paramsData = { ...this.paramsData, ...this.editdata };
    console.log(this.paramsData);
    this.getTypes();
  },
  created() {
    // this.paramsData.sensorName = new Date();
  },
  methods: {
    close() {
      this.$emit("closeAdd");
    },
    // querySearch(queryString, cb) {
    //   // debugger
    //   var restaurants = this.systemTypesList;
    //   var results = queryString
    //     ? restaurants.filter(this.createFilter(queryString))
    //     : restaurants;
    //   // 调用 callback 返回建议列表的数据
    //   cb(results);
    // },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    async getTypes() {
      const data1 = await getAllSystemTypes();
      const systemData = data1.data;
      const arr = [];
      systemData.forEach((item) => {
        arr.push({ value: item });
      });
      // const data2 = await getMonitorTypes()
      this.systemTypesList = arr;
      console.log(this.systemTypesList);
      // this.monitorTypesList = data2.data
      // console.log(data1, data2)
    },
    changeUser(e, key) {},
    confirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editdata && this.editdata.id) {
            this.paramsData.id = this.editdata.id;
          }

          this.$emit("sendData", this.paramsData);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.add-device-box {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.add-device {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 800px;
  background: url("../../../assets/setting_image/confirm_bg.png");
  background-size: 100% 100%;
  position: relative;
  // background-color: rgba(17, 24, 59, 0.8);
  .head {
    height: 95px;
    font-size: 28px;
    color: #6dc9ff;
    font-weight: 550;
    display: flex;
    justify-content: center;
    align-items: center;
    // border-bottom: 1px solid #142660;
  }
  .main {
    padding: 20px;
    width: 100%;
  }
  .footer {
    width: 100%;
    // padding: 20px 0;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.inner {
  ::v-deep .el-input__inner {
    width: 640px;
  }
}
::v-deep .el-input__inner {
  font-size: 12px !important;
  // height: 45px;
  width: 260px;
  // background: #11194F;
}
::v-deep .redColor .el-input__inner {
  border-color: red;
}
::v-depp .is-checked .el-checkbox__label {
  color: #fff;
}
::v-depp .el-checkbox__inner {
  width: 22px;
  height: 22px;
}

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
::v-deep input[type="number"] {
-moz-appearance: textfield !important;
}
</style>

在这里插入图片描述

修正长度中可以输入加减号的bug问题

{
	required:true,
	message:'仅支持输入数字',
	trigger:'change',
	pattern:/^[\d\.]+$/,   // 只能输入数字，除小数点之外其他的都默认是特殊字符
}

大于等于0小于等于100的正数用正则表达式表示
可以有小数：^100$|^(\d|[1-9]\d)(\.\d+)*$

不可以有小数：^100$|^(\d|[1-9]\d)$
WFF的赵本山
关注
详解js正则表达式验证时间格式xxxx-xx-xx形式
10-18
在进行前端开发时，时间格式验证是一个常见的需求。...在实际开发过程中，开发者应根据实际情况调整正则表达式的复杂度和验证逻辑，确保既能覆盖尽可能多的非法输入，又不至于过度限制用户的输入自由。
input number 数字输入限制，最大值最小值输入范围限制
acoolgiser的博客
02-25 4万+
input number 数字输入限制，最大值最小值输入范围限制
el-input输入框只能输入数字并且最大值是100以及可以输入小数不能输入负数。
weixin_47373981的博客
07-17 521
【代码】el-input输入框只能输入数字并且最大值是100以及可以输入小数不能输入负数。
input限制的正则表达式
阿莹yes的博客
03-13 1806
input限制的正则表达式。
el-form表单验证 限制只能输入数字及数字大小范围
weixin_53898445的博客
01-13 6151
el-form表单验证 限制只能输入数字及数字大小范围
input输入长度与限制内容
热门推荐
sk_shenghuo的博客
04-16 6万+
1、限制input最大长度 <input type="text" maxlength="5" /> //可以 <input type="number" maxlength="5" /> //没有效果 <input type="number" oninput="if(value.length&g...
JavaScript 表单验证正则表达式大全[推荐]
12-12
具体和函数结合的使用方法，还请查看下篇文章 JavaScript 使用正则表达式进行表单验证的示例代码 代码如下:匹配中文字符的正则表达式： [u4e00-u9fa5] 评注：匹配中文还真是个头疼的事，有了这个表达式就好办了 匹配...
Javascript的表单验证-揭开正则表达式的面纱
10-22
本文主要介绍了JavaScript在表单验证中如何使用正则表达式，通过具体的实例解释了正则表达式的元字符、限定符等概念，并展示了如何用这些知识点来实现具体的表单验证功能。 正则表达式是一种用来匹配字符串中字符...
使用正则表达式获取数值范围里的最大最小值，包含整数和小数
小小白的博客
07-30 9105
需求：判断指标数值是否符合参考范围，例如参考范围"5.5 - 10.5"，指标数值7.5，即是符合正常范围；指标数值4.5，即是低于正常范围，指标数值15，即是高于正常范围。 由于参考值的数据来源不同，格式可能不一致，如"5.5 - 10.5"、"5.5-10.5"、"5.5 ~ 10.5"、"5.5~10.5"等。考虑使用正则表达式来获取不同格式的参考范围的最大最小值。 正则表达式： ...
input限制最大值不超过60
weixin_41970780的博客
07-21 2120
input限制最大值不超过60 <input type="number" class="inputBj" v-model="chargingTimeMinute" placeholder="请输入" oninput="if(value>60)value=60"/>
正则表达式限制数值取值范围，以及邮箱地址，IP地址
Carolinedy的博客
11-18 7179
首先，需要熟悉以下语法 正则表达式语法 意义 \d 数字 \w 字母、数字或下划线字符 {x} (x为正整数，作用于前面的字符) 字符的位数 {1, 20} 表示数字字符串长度的合法值为1到20 [0, 9] 数字应在0-9之间 （[ ]中是可选字符集） [a-zA-Z] 表示要求为字母 ^ 打头的字符要匹配紧跟^后面的规则。 例如：^[0,9] 表明打头的字符应是0-9之间的数字; ^The 表明所有以The打.
Input输入控件的size与maxlength及其disabled与readonly属性的区别
freshlover的专栏
03-12 6712
最近在PHP+html5的项目中，忽然意识到常用的限制输入框的两个属性，以前还没有注意到区别，现在测试了一下，区别分析如下 Input的size与maxlength属性的区别               消息ID                   " required="required" pattern="[0-9]{1,8}" autofocus="autofocus" pla
el-input输入值设置最大值、最小值问题
E_li_na的博客
10-22 2万+
如果使用max、min属性，则必须同时加上与type=“number”。 设置type="number"样式，输入框尾部会出现一个上下箭头，min和max只能控制用箭头输入的最大值最小值，对键盘打字输入是限制不住的。 如果需要限制input输入的值，最实用的做法是给input绑定一个change事件，在change事件中用正则判断。这里会涉及到一个type=”number”同时正则判定，对"e"失效的问题。（要看怎么理解失效）,可以同时watch一下el-input绑定的model 设置了type=”num
el-input只能输入大于0的整数，而且范围是0~360
Aa12364567的博客
08-12 2377
el-input只能输入大于零的整数，且范围是0~360
el-from动态验证必填项校验/input验证必须为数字且最大为...
一个超爱喝可乐的web前端攻城狮
12-28 1674
el-from动态验证必填项校验/input验证必须为数字且最大为… input验证必须为数字且最大为… //html <el-input v-model="add.num" @input="get_num(arguments[0], 40)" //最大阀值为40 ></el-input> // js get_num(val, maxNum) { this.add.num = Number(val); this.$nextTick(() => {
正则0-999999.99，且最多只能保留2位小数
weixin_42583683的博客
01-09 1331
正则表达式可以匹配 0 到 999999.99 之间的数字，且最多只能保留 2 位小数。 这是一种可以使用的正则表达式： ^[0-9]{1,6}(\.[0-9]{1,2})?$ 其中，^ 表示匹配开头，[0-9] 表示匹配一个数字，{1,6} 表示匹配 1 到 6 个数字，(\. 表示匹配一个小数点，[0-9] 和 {1,2} 的含义同上，)? 表示小数部分是可选的，$ 表示匹配结尾。 你可以使...
vue3中表单验证正则表达式数字0-9
最新发布
09-29
在Vue3中，你可以使用`v-model`指令结合自定义的正则表达式来进行表单验证。如果你想限制输入的是0到9之间的数字，你可以使用这样的正则表达式：`\d`。这表示匹配任何一个数字字符。下面是一个简单的例子： ```html <template> <div> <input v-model="numberInput" @blur="validateNumber"> <p :class="{ 'error': hasError }">{{ errorMessage }}</p> </div> </template> <script> export default { data() { return { numberInput: '', hasError: false, errorMessage: '' }; }, methods: { validateNumber() { const regex = /^\d$/; if (!regex.test(this.numberInput)) { this.hasError = true; this.errorMessage = '请输入0-9之间的数字'; } else { this.hasError = false; this.errorMessage = ''; } } } }; </script> <style scoped> .error { color: red; } </style> ``` 在这个例子中，当用户停止键入并触发`@blur`事件时，会调用`validateNumber`方法，如果输入不符合正则表达式，就会显示错误消息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值