表单Input输入数值校验(input事件中做输入限制，只能输入正数（包含整数和小数）)

最新推荐文章于 2025-03-11 18:16:40 发布

BelieveTom、

最新推荐文章于 2025-03-11 18:16:40 发布

阅读量786

点赞数

分类专栏： Element JS 文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/m0_52510500/article/details/132801156

版权

Element 同时被 2 个专栏收录

13 篇文章

订阅专栏

6 篇文章

订阅专栏

表单校验在日常开发中肯定是老生常谈的问题，具体的就不展开说了，这次就是想和大家分享一种较为完美解决数值输入校验的方法...

使用Element表单的话，正常的话就是在rules属性中设置校验规则，在表单提交时进行校验，或者是在onkeyup属性中通过正则限制输入，但是onkeyup会体现出replace替换的过程，可能会带来不太友好的用户体验，还有就是仅仅使用正则不能完美地解决输入限制的需求...

接下来我分享的就是在input事件中去做输入的限制，同时能够解决onkeyup带来的一些问题... 不说了，直接粘代码...

weightIpt() {
	const reg = /^[+]{0,1}(\d+\.?\d*|\.\d+)$/;
    if (!reg.test(this.formData.goodWeight)) {
          this.formData.goodWeight = this.formData.goodWeight.replace(/[^\d.]/g, '');
		  const index = this.formData.goodWeight.indexOf('.');
          if (index !== -1 && this.formData.goodWeight.indexOf('.', index + 1) !== -1) {
            this.formData.goodWeight = this.formData.goodWeight.substr(0, index + 1) + 
            this.formData.goodWeight.substr(index + 1).replace(/\./g, '');
          }
    }
}