el-input 只能输入整数(包括正数、负数、0)或者只能输入整数(包括正数、负数、0)和小数

我们可以优先使用el-input-number标签
https://element.eleme.cn/#/zh-CN/component/input-number

在这里插入图片描述
支持很多属性可以到官网查看

也可以使用type=numbe和v-model.number属性,两者结合使用,能满足大多数需求,如果还不满足,可以再结合正则表达式过滤

<el-input v-model.number="value" type="number" />

el-input标签type=number或者v-model.number属性,可能也没有完全符合我们想要的结果,所以直接使用正则表达式过滤

<el-input v-model="height" placeholder="请输入" @input="handleEdit" />

el-input 只能输入正整数(包括0)

// 在 Input 值改变时触发
handleEdit(e) {
      let value = e.replace(/[^\d]/g, ""); // 只能输入数字
      value = value.replace(/^0+(\d)/, "$1"); // 第一位0开头,0后面为数字,则过滤掉,取后面的数字
      value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数
      this.height = value
}

el-input 只能输入正整数(不包括0)

// 在 Input 值改变时触发
handleEdit(e) {
      let value = e.replace(/^(0+)|[^\d]+/g,''); // 以0开头或者输入非数字,会被替换成空
      value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数
      this.height = value
}

el-input 只能输入负整数(包括0)

// 在 Input 值改变时触发
handleEdit(e) {
      let value = e.replace(/[^\-\d]/g, ""); // 只能输入-和数字
      value = value.replace(/^[1-9]/g, ""); // 不能以1-9开头
      value = value.replace(/\-{2,}/g, "-"); // -只能保留一个
      value = value.replace(/(\d)\-/g, "$1"); // 数字后面不能接-,不能出现类似-11-2,12-,11-23
      value = value.replace(/-(0+)/g, "0"); // 不能出现-0,-001,-0001类似
      value = value.replace(/^0+(\d)/, "0"); // 第一位0开头,0后面为数字,则过滤掉,取0
      value = value.replace(/(-\d{15})\d*/, '$1') // 最多保留15位整数
      this.height = value
}

el-input 只能输入负整数(不包括0)

// 在 Input 值改变时触发
handleEdit(e) {
      let value = e.replace(/[^\-\d]/g, ""); // 只能输入-和数字
      value = value.replace(/^\d/g, ""); // 不能以数字开头
      value = value.replace(/\-{2,}/g, "-"); // -只能保留一个
      value = value.replace(/(\d)\-/g, "$1"); // 数字后面不能接-,不能出现类似-11-2,12-,11-23
      value = value.replace(/(-)0+/g, "$1"); // 不能出现-0,-001,-0001类似
      value = value.replace(/(-\d{15})\d*/, '$1') // 最多保留15位整数
      this.height = value
}

el-input 只能输入整数(包括正整数、负整数、0)

// 在 Input 值改变时触发
handleEdit(e) {
      let value = e.replace(/[^\-\d]/g, ""); // 只能输入-和数字
      value = value.replace(/\-{2,}/g, "-"); // -只能保留一个
      value = value.replace(/(\d)\-/g, "$1"); // 数字后面不能接-,不能出现类似-11-2,12-,11-23
      value = value.replace(/-(0+)/g, "0"); // 不能出现-0,-001,-0001类似
      value = value.replace(/^0+(\d)/, "$1"); // 第一位0开头,0后面为数字,则过滤掉,取后面的数字
      value = value.replace(/(-?\d{15})\d*/, '$1') // 最多保留15位整数
      this.height = value
}

el-input 只能输入正小数(包括0)

// 在 Input 值改变时触发
handleEdit(e) {
      let value = e.replace(/[^\d.]/g, '') // 只能输入数字和.
      value = value.replace(/^\./g, '')  //第一个字符不能是.
      value = value.replace(/\.{2,}/g, '.') // 不能连续输入.
      value = value.replace(/(\.\d+)\./g, '$1') // .后面不能再输入.
      value = value.replace(/^0+(\d)/, '$1') // 第一位0开头,0后面为数字,则过滤掉,取后面的数字
      value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数
      value = value.replace(/(\.\d{2})\d*/, '$1')// 最多保留2位小数
      this.height = value
}

el-input 只能输入负小数(包括0)

// 在 Input 值改变时触发
handleEdit(e) {
      let value = e.replace(/[^\-\d.]/g, ""); // 只能输入-和数字和.
      value = value.replace(/^[^\-0]/g, ""); // 只能-和0开头
      value = value.replace(/\-{2,}/g, "-"); // 不能连续输入-
      value = value.replace(/(-)\./g, "$1"); // -后面不能输入.
      value = value.replace(/\.{2,}/g, "."); // 不能连续输入.
      value = value.replace(/(\.\d+)\./g, "$1"); // .后面不能再输入.
      value = value.replace(/(\d+|\.)-/g, "$1"); // 数字和.后面不能接-,不能出现类似11-, 12.-
      value = value.replace(/(-)0+(\d+)/g, '$1$2') // 不能出现-01,-02类似
      value = value.replace(/^0+(\d|.)/, "0"); // 第一位0开头,0后面为数字或者.,则过滤掉,取0
      value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数
      value = value.replace(/(\.\d{2})\d*/, '$1')// 最多保留2位小数
      this.height = value
}

el-input 只能输入负小数(不包括0)

// 在 Input 值改变时触发
handleEdit(e) {
      let value = e.replace(/[^\-\d.]/g, ""); // 只能输入-和数字和.
      value = value.replace(/^[^\-]/g, ""); // 只能-开头
      value = value.replace(/\-{2,}/g, "-"); // 不能连续输入-
      value = value.replace(/(-)\./g, "$1"); // -后面不能输入.
      value = value.replace(/\.{2,}/g, "."); // 不能连续输入.
      value = value.replace(/(\.\d+)\./g, "$1"); // .后面不能再输入.
      value = value.replace(/(\d+|\.)-/g, "$1"); // 数字和.后面不能接-,不能出现类似11-, 12.-
      value = value.replace(/(-)0+(\d+)/g, '$1$2') // 不能出现-01,-02类似
      value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数
      value = value.replace(/(\.\d{2})\d*/, '$1')// 最多保留2位小数
      this.height = value
}

el-input 输入整数(包括正数、负数、0)和小数,保留15位整数和2位小数

// 在 Input 值改变时触发
handleEdit(e) {
      let value = e.replace(/[^\-\d.]/g, '') // 只能输入.和-和数字
      value = value.replace(/^\./g, '')  //第一个字符不能是.
      value = value.replace(/\.{2,}/g, '.') // 不能连续输入.
      value = value.replace(/(\.\d+)\./g, '$1') // .后面不能再输入.
      value = value.replace(/(-)\./g, '$1') // -后面不能输入.
      value = value.replace(/\-{2,}/g, '-') // -只能保留一个
      value = value.replace(/(\d+|\.)-/g, '$1') // 数字和.后面不能接-,不能出现类似11-, 12.-
      value = value.replace(/-(0){2,}/g, "$1") // 不能出现-00,-001,-0001类似
      value = value.replace(/(-)0+(\d+)/g, '$1$2') // 不能出现-01,-02类似
      value = value.replace(/^0+(\d)/, '$1') // 第一位0开头,0后面为数字,则过滤掉,取后面的数字
      value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数
      value = value.replace(/(\.\d{2})\d*/, '$1')// 最多保留2位小数
      this.height= value
}

$1表示匹配第一个括号里的内容,$2表示匹配第二个括号的内容,比如

value = value.replace(/(-)\./g, '$1') // 输入框输入-.就会替换成-
value = value.replace(/(-)(0{2,})/g, '$1$2') // 输入-00,-000,就会替换成-0

写得有点复杂,没办法,刚上手的正则表达式。如果配合el-input标签的type=number或者v-model.number属性,正则表达式部分也许不用写这么多而且复杂。有更简洁的方法请评论区留言
附上:
正则表达式 学习网址1
正则表达式 学习网址2
正则表达式在线测试网址

  • 41
    点赞
  • 202
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
el-inputElement UI库中的一个输入框组件,用于接收用户的输入。如果你想限制el-input只能输入整数0-100,可以通过以下几种方式实现: 1. 使用type属性:设置el-input的type属性为"number",这样输入框将只接受数字类型的输入。然后,你可以通过添加min和max属性来限制输入的范围为0-100。 ```html <el-input type="number" :min="0" :max="100"></el-input> ``` 2. 使用自定义验证规则:通过设置el-input的自定义验证规则,可以在用户输入时进行验证。你可以使用正则表达式来限制输入的范围为0-100。 ```html <el-input v-model="inputValue" :rules="[{ pattern: /^(?:0|[1-9][0-9]?|100)$/ }]" ></el-input> ``` 在上述代码中,v-model绑定了一个名为inputValue的变量,用于存储用户输入的值。rules属性接受一个数组,其中包含了一个正则表达式规则,该规则限制了输入的范围为0-100。 3. 使用自定义指令:你还可以通过自定义指令来实现对el-input的限制。自定义指令可以在用户输入时拦截并处理输入的内容。 ```javascript Vue.directive('limitInput', { bind: function(el) { el.addEventListener('input', function(e) { var value = e.target.value; if (value !== '') { value = parseInt(value); if (isNaN(value) || value < 0 || value > 100) { e.target.value = ''; } } }); } }); ``` 在上述代码中,我们定义了一个名为limitInput的自定义指令,通过addEventListener监听input事件,在用户输入时进行处理。如果输入的值不符合要求(不是整数或超出范围),则将输入框的值设为空。 然后,在el-input上应用这个自定义指令: ```html <el-input v-limit-input></el-input> ``` 这样,el-input只能输入整数0-100了。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值