elementui el-input输入框正则限制

拾一九

已于 2024-07-02 11:27:25 修改

阅读量3.6k

点赞数

分类专栏： elementUi vue开发学习文章标签： elementui 前端 javascript

于 2023-02-28 10:43:48 首次发布

本文链接：https://blog.csdn.net/DarlingYL/article/details/129256922

版权

vue开发学习同时被 2 个专栏收录

31 篇文章 2 订阅

订阅专栏

elementUi

18 篇文章 1 订阅

订阅专栏

文章介绍了如何使用正则表达式在前端进行输入验证，包括限制输入为最多3位小数的数字，首位不能为0，自动补全；限制输入为2位英文字符；以及纯数字验证，包括整数和浮点数，并提供了自定义范围的验证示例。这些方法常用于表单验证和数据过滤。

摘要由CSDN通过智能技术生成

1、只能输入数字且小数点为3位、只有一位小数点、0开头后面不是小数点则以数字替换、自动补全

<el-input
  v-model="value"
  oninput="
    this.value=this.value.replace(/\D*(\d*)(\.?)(\d{0,2})\d*/,'$1$2$3') // 只能输入数字、小数点限制2位
    .replace(/^0+(\d)/, '$1') // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
    .replace(/^\./, '0.') // 如果输入的第一位为小数点，则替换成 0. 实现自动补全
    .match(/^\d*(\.?\d{0,2})/g)[0] || '' // 数字开头、小数点2位
  "
/>

正则表达式

const regex = /^\d+(\.\d*)?$/; // 使用正则表达式匹配 正整数 或小数点位数不限制的浮点数
consol.log(regex.test('1234.567')); // true
consol.log(regex.test('1234.567.')); // false
consol.log(regex.test('1234.567a')); // false
consol.log(regex.test('1234.567!@')); // false

2、只能输入英文且只能输入2位数

<el-input v-model="scope.row.name" maxlength="2" clearable @input="(value) => voucherTypeInput(value, scope.row)" />

handleInput(value, row) {
  const regex = /^[a-zA-Z]*$/;
  if (!regex.test(value)) {
    row.name = ''
  }
},

3、纯数字正则校验(小数点也不能输入)

var regex = /^[0-9]+$/;
const str = '测试中文字符串'
const str2 = 'abc'
const str3 = '123'
const str4 = 123
console.log(regex.test(str)) // false
console.log(regex.test(str2)) // false
console.log(regex.test(str3)) // false
console.log(regex.test(str4)) // true

补充

整数（可带正负号）：var regex = /^-?\d+$/;
浮点数（可带正负号）：var regex = /^-?\d+(\.\d+)?$/;
自定义范围的整数：
// 检验整数是否在 100 到 999 之间
var regex = /^([1-9]\d{2})$/;
自定义范围的浮点数：
// 检验浮点数是否在 -10.0 到 10.0 之间
var regex = /^-?([1-9]\d{0,1}|10)(\.\d{1,2})?$/;