WEB前端页面:表单/输入框仅可以输入数字(正则表单时校验)

定义方法及传入参数

<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,'')
	}
}

你可能感兴趣的:(知识分享,前端,javascript,vue.js)