WEB前端页面：表单/输入框仅可以输入数字（正则表单时校验）

最新推荐文章于 2022-10-31 09:40:05 发布

原创最新推荐文章于 2022-10-31 09:40:05 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

知识分享专栏收录该内容

28 篇文章

订阅专栏

本文介绍了两种前端输入验证的方法，用于限制用户在输入框中只能输入小数或整数。方式1允许输入小数，但确保小数点只出现一次；方式2则完全禁止小数，只允许输入整数。这些方法对于前端表单数据校验至关重要，确保了用户输入的数据格式正确性。

定义方法及传入参数

<el-input
   v-model="workLoadInfo.auditorCount"
   size="medium"
   @keyup.native="onlyNumber(workLoadInfo)"  
   style="width: 80px"
   placeholder="请输入">
</el-input>

创建方法及校验表单

方式1（可以输入小数点）

onlyNumber(data) {
	if (data.auditorCount!= null && data.auditorCount != '' && data.auditorCount != undefined) {
		//只有一个小数 
	  data.auditorCount = data.auditorCount.replace(/\.{2,}/g,'.'); 
	  //保证.只出现一次，而不能出现两次以上
	  data.auditorCount= data.auditorCount.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
	  //只可以输入小数
	  data.auditorCount= data.auditorCount.replace(/[^\.\d]/g, ""); 
	}
}

方式2（只可以输入整数）

*实现方式1：*
<el-input>
	oninput="value=value.replace(/[^\d]/g,'')"
</el-input>

*实现方式2：*
onlyNumber(data) {
	if (data.auditorCount!= null && data.auditorCount != '' && data.auditorCount != undefined) {
		//只有一个小数 
	  data.auditorCount = data.auditorCount.replace(/[^\d]/g,'')
	}
}