el-input校验利率输入框

需求描述

在表单中使用利率,要求输入值在0-100之间,输入框后显示 % ,传递给后端的是能是数字。

问题解决

  • 样式
// scss
.suf-after {
	display: block;
	width: 25px;
	height: 35px;
	text-align: center;

	position: absolute;
	top: 0;
	right: 0;
}

.suffix-pre {
	position: relative;
	&::after {
		content: '%';
		@extend .suf-after;
	}
}

.suffix-pre.is-disabled {
	&::after {
		color: #C0C4CC;
	}
}
  • vue
<el-form-item label="利率" prop="rate">
    <el-input class="suffix-pre" v-model="form1.rate" />
</el-form-item>
  • 校验规则
// 注意规则中的 transform 方法,可以在验证之前转换值,能解决在table中的form输入了数字依然无法通过校验的问题。
rate: [
        {required: true, message: '必输项不能为空', trigger: 'blur'},
        {type: 'number', min: 0, max: 100, message: '必须是0-100之间的数字', transform(v){return Number(v)}, trigger: 'blur'}
],
  • 校验方法

this.$refs.form1.validate()
  .then(_ => {
     console.log('adddddd')
  })
  .catch(({ errors, fields }) => {
     console.log(errors, fields)
  })
posted @ 2022-06-07 16:15  小方块的世界  阅读(76)  评论(0)    收藏  举报