采用 element ui 的表格验证规则,输入框输入小数点,验证小数点的位数(限制输入两位)和是否正确输入

<el-form-item label="训练集比例" prop="trainingRate">
		<el-input v-model="ruleForm.trainingRate" placeholder="请输入内容"
			oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
		<div><span style="color: #d9001b">*</span> 输入0.5~0.9的数字</div>
</el-form-item>

在输入框输入时先验证输入是数字。

在 rules 验证时自定义方法验证,validateNumber 是验证方法名

rules: {
					trainingRate: [{
						required: true,
						trigger: 'change',
						validator: validateNumber
					}],
			},
data() {
			const validateNumber = (rule, value, callback) => {
				if (value < 0.5 || value > 0.9) {
					callback(new Error('请输入0.5~0.9的数字'))
				} else if (value.indexOf(".") != -1 && value.split('.').length > 2) {
					callback(new Error('请输入正确格式')) // 防止输入多个小数点
				} else if (value.indexOf(".") != -1 && value.split('.')[1].length > 2) {
					callback(new Error('请输入正确的小数位数')) // 小数点后两位
				} else {
					callback();
				}
			};
			return {
		
				rules: {
		
					trainingRate: [{
						required: true,
						trigger: 'change',
						validator: validateNumber
					}],
				},
		
			};
		},

value 是输入框输入的值,实时监听输入框的值,

效果图:

更新于