el-input输入框数字,小数点,字母等多种类型限制

1.只能输入数字


        <el-input
          v-model="rowForm.carriage"
          clearable
          size="small"
          style="width: 90px"
          @input="value => rowForm.carriage= Number(value.replace(/[^\d]/g,''))"
        />
  
或者公共方法
// 只能输入数字
export function setNumberValue(value) {
  if (value !== "") {
    // 保留数字部分
    value = Number(value.replace(/\D/g, ""));
    // 如果结果为零,则返回1,否则返回处理后的数字
    return value === 0 ? 1 : value;
  } else {
    // 如果值为空字符串,则返回 null
    return null;
  }
}

//使用 @input='handleInputId'
 handleInputId (value) {
            this.$set(this.form, "id", setNumberValue(value));
        },

2.输入数字小数点

 @input="rowForm.carriage= rowForm.carriage.replace(/[^\d|\.]/g, '')"

3.只能输入数字和保留2位小数

 oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''" 

4.只能输入数字和英文

onkeyup="value=value.replace(/^[a-zA-Z0-9]+$/, '')"



// 只能输入数字和英文
export function setNumberValue2(value) {
 const regex = /^[a-zA-Z0-9]+$/;
 if (regex.test(value)) {
   return value;
 } else {
   // 输入特殊符号,返回原始值中的字母和数字部分 如输入123s@,保留123s
   return value.replace(/[^a-zA-Z0-9]/g, "");
 }
}

5.只能输入中文、数字、英文,不包含符号

<el-input oninput="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')">

6.只能输入英文,数字,不能输入中文

oninput="value=value.replace(/[^\w\.\/]/ig,'')"

7.只能输入中文,其他都不可输入

  <el-input v-model="rowForm.carriage" clearable @input="handleInput"/>
  handleInput() {
      const regex = /^[\u4e00-\u9fa5]+$/; // 中文字符的正则表达式
      if (!regex.test(this.rowForm.carriage)) {
        this.rowForm.carriage = '';
      }
    },

或者

<el-input type="text"οnkeyup="this.value=this.value.replace(/[^\u4e00\u9fa5]/g,'')"/>

8.只能英文,其他不可 

<el-input type="text" onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">

  • 13
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值