elementui el-input输入框正则限制

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

补充

  1. 整数(可带正负号):var regex = /^-?\d+$/;
  2. 浮点数(可带正负号):var regex = /^-?\d+(\.\d+)?$/;
  3. 自定义范围的整数:
    // 检验整数是否在 100 到 999 之间
    var regex = /^([1-9]\d{2})$/;
  4. 自定义范围的浮点数:
    // 检验浮点数是否在 -10.0 到 10.0 之间
    var regex = /^-?([1-9]\d{0,1}|10)(\.\d{1,2})?$/;
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在 el-input 标签中添加 v-model.number 修饰符即可。例如: ``` <el-input v-model.number="inputNumber"></el-input> ``` 这样只能输入数字。 ### 回答2: 要设置el-input输入框只能输入数字,可以通过以下几种方法实现。 第一种方法是使用el-input的number属性,将其设置为true。这样,输入框将只允许用户输入数字,如果用户输入其他字符,输入框会自动过滤掉非数字字符。 第二种方法是使用正则表达式限制输入。可以通过el-input的change事件,监听用户输入的字符,并使用正则表达式判断输入的字符是否为数字。如果输入的字符不是数字,可以在change事件的回调函数中阻止该字符的输入或者在显示的时候对输入进行格式化。 第三种方法是通过自定义指令来限制输入。可以使用Vue的directive函数定义一个自定义指令,指令的bind和update函数中可以通过正则表达式判断输入的字符是否为数字,并对输入进行过滤或格式化操作。然后在el-input上使用v-num-only指令来限制输入。 以上是三种常用的方法来设置el-input输入框只能输入数字。具体选择哪种方法可以根据实际需求和项目的特点进行选择和调整。 ### 回答3: 要设置el-input输入框只能输入数字,可以使用element-ui框架提供的属性和方法来实现。 首先,在el-input组件中,可以使用type属性来限制输入框的类型。要输入数字,可以将type属性设置为"number"。例如: <el-input type="number"></el-input> 接下来,使用input事件来监听输入框输入。当用户输入不符合要求的内容时,可以使用正则表达式来过滤掉非数字字符。在input事件的回调函数中,获取输入框中的值,然后使用replace方法将非数字字符替换为空字符。例如: <el-input type="number" @input="handleInput"></el-input> methods: { handleInput(value) { this.value = value.replace(/[^\d]/g, ""); } } 通过上述操作,当用户在输入框输入非数字字符时,这些字符将会被过滤掉,只保留数字字符。这样就能实现el-input输入框只能输入数字的效果了。 需要注意的是,为了确保只能输入数字,还可以使用max和min属性来设置输入框的最大和最小值,或使用maxlength属性来限制输入字符的长度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值