el-input只能输入整数,小数、最多保留两位小数、最多输入4位小数,过滤el-input输入框中的特殊符号

只能输入框只能输入正整数,输入同时禁止了以0开始的数字输入,防止被转化为其他进制的数值。

复制代码
<el-input
v-model="programForm.ladderSectionUpperBound"
@input="(v)=>(programForm.ladderSectionUpperBound=v.replace(/^(0+)|[^\d]+/g,''))"></el-input>

1、只能输入纯数字

复制代码
<el-input v-model="aaa" type="text" @input="(v)=>(aaa=v.replace(/[^\d]/g,''))" />

2、能输入纯数字和小数(比如:6.66)

复制代码
<el-input v-model="aaa" type="text" @input="(v)=>(aaa=v.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1'))" />

3、小数最多保留两位(注意: type="text" )

复制代码
<el-form-item label="培训市场价:" prop="trainMarketPrice">
  <el-input  type="text" placeholder="请输入内容" v-model="form.trainMarketPrice" maxlength="20" onkeyup="value=value.replace(/[^\d.]/g, '')" show-word-limit>
  </el-input>
</el-form-item>

data() {

	var marketPrice = (rule, value, callback) => {
      if ((String(value).length - (String(value).indexOf(".") + 1)) > 2 && String(value).indexOf(".") >= 0) {
            callback(new Error("培训市场价限两位小数"));
      } else {
          callback();
      }
    }
    
	return {
		form: {
			trainMarketPrice: '',
		}
		rules:{
	        trainMarketPrice: [{ validator: marketPrice,  trigger: 'blur'} ], 
	 	}
	}
}

最多输入4位小数

复制代码
onkeyup="this.value=this.value.match(/\d+\.?\d{0,4}/);

<el-input placeholder="请输入" onkeyup="this.value=this.value.match(/\d+\.?\d{0,4}/);" v-model="form.powerGrid" clearable></el-input>

<el-input 
 v-model="increDistriNetForm.powerCapacity"
 placeholder="请输入"
 @input="limitInput($event)"
 ></el-input>
 >
//限制只能输入4位小数
limitInput (value) {
  this.increDistriNetForm.powerCapacity = ('' + value) // 第一步:转成字符串
    .replace(/[^\d^\.]+/g, '') // 第二步:把不是数字,不是小数点的过滤掉
    .replace(/^0+(\d)/, '$1') // 第三步:第一位0开头,0后面为数字,则过滤掉,取后面的数字
    .replace(/^\./, '0.') // 第四步:如果输入的第一位为小数点,则替换成 0. 实现自动补全
    .match(/^\d*(\.?\d{0,4})/g)[0] || '' // 第五步:最终匹配得到结果 以数字开头,只有一个小数点,	而且小数点后面只能有0到2位小数
},

4、过滤el-input输入框中的特殊符号

复制代码
el.value = el.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, "");

// 注意,此时不能在v-model后添加修饰符,例如v-model.trim 就会使上面的指令失效,具体原因待研究。

5、只能输入0-9

复制代码
onkeyup="value=value.replace(/^[^0-9]|[^\d]+/g,'')"

6、JS 控制不能输入特殊字符

复制代码
<input onkeyup="this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')">;

7、JS 控制文本框只能输入数字

复制代码
<input onkeyup="value=value.replace(/[^0-9]/g,'')" 
onpaste="value=value.replace(/[^0-9]/g,'')" 
oninput = "value=value.replace(/[^0-9]/g,'')">

8、JS 控制文本框只能输入数字、小数点

复制代码
<input onkeyup="value=value.replace(/[^\0-9\.]/g,'')" 
onpaste="value=value.replace(/[^\0-9\.]/g,'')" 
oninput = "value=value.replace(/[^\0-9\.]/g,'')">

9.JS 控制文本框只能输入英文

复制代码
<input onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')" 
onpaste="value=value.replace(/[^\a-\z\A-\Z]/g,'')" 
oninput = "value=value.replace(/[^\a-\z\A-\Z]/g,'')">

10.JS 控制文本框只能输入英文、数字

复制代码
<input onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" 
onpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" 
oninput = "value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')">

11.JS 控制文本框只能输入中文

复制代码
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" 
onpaste="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" 
oninput = "value=value.replace(/[^\u4E00-\u9FA5]/g,'')">

12.JS 控制文本框只能输入中文、英文、数字

复制代码
<input onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" 
onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" 
oninput = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')">

13.JS 控制文本框只能输入中文、英文、数字、空格

复制代码
<input onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')" 
onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')" 
oninput = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')">

14.JS 控制文本框只能输入中文、英文、数字、小数点

复制代码
<input onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')" 
onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')" 
oninput = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')">
相关推荐
小兵张健6 小时前
价值1000的 AI 工作流:Codex 通用前端协作模式
前端·aigc·ai编程
sunny_6 小时前
面试踩大坑!同一段 Node.js 代码,CJS 和 ESM 的执行顺序居然是反的?!99% 的人都答错了
前端·面试·node.js
拉不动的猪6 小时前
移动端调试工具VConsole初始化时的加载阻塞问题
前端·javascript·微信小程序
ayqy贾杰8 小时前
Agent First Engineering
前端·vue.js·面试
IT_陈寒8 小时前
SpringBoot实战:5个让你的API性能翻倍的隐藏技巧
前端·人工智能·后端
iceiceiceice9 小时前
iOS PDF阅读器段评实现:如何从 PDFSelection 精准还原一个自然段
前端·人工智能·ios
大金乄9 小时前
封装一个vue2的elementUI 表格组件(包含表格编辑以及多级表头)
前端·javascript
葡萄城技术团队10 小时前
【性能优化篇】面对万行数据也不卡顿?揭秘协同服务器的“片段机制 (Fragments)”
前端
程序员阿峰10 小时前
2026前端必备:TensorFlow.js,浏览器里的AI引擎,不写Python也能玩转智能
前端
Jans10 小时前
Shipfe — Rust 写的前端静态部署工具:一条命令上线 + 零停机 + 可回滚 + 自动清理
前端