<template>
<div class="app-container home">
<el-form ref="form" :inline="true" :model="form" :rules="rules">
<el-form-item prop="min">
<el-input v-model="form.min" clearable=""/>
</el-form-item>
~
<el-form-item prop="max">
<el-input v-model="form.max" clearable=""/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "Index",
data() {
return {
// 表单
form: {
min: "",
max: "",
},
// 校验规则
rules: {
min: [
{ required: true, message: "必填项,请维护", trigger: "blur" },
{ validator: this.validateCom, trigger: "blur" },
{ validator: this.validateMin, trigger: "blur" },
],
max: [
{ required: true, message: "必填项,请维护", trigger: "blur" },
{ validator: this.validateCom, trigger: "blur" },
{ validator: this.validateMax, trigger: "blur" },
],
},
minNum: 0, //最小值
maxNum: 100, //最大值
};
},
methods: {
// 提交时校验
getFormData() {
const ret = {};
this.$refs.form.validate((valid) => {
ret.valid = valid;
ret.form = this.form;
});
return ret;
},
// 重置表单
resetForm() {
this.$refs.form.resetFields();
},
// 基础判断:1、输入值符合 0<num<100,且为正整数的规则
validateCom(rule, value, callback) {
const num = Number(value);
if (Number.isInteger(num)) {
if (num < this.minNum) {
return callback(new Error("输入值必须大于0"));
} else if (num > this.maxNum) {
return callback(new Error("输入值必须小于100"));
}
return callback();
}
return callback(new Error("输入值必须为正整数"));
},
// 最小值判断:不得大于最大值
validateMin(rule, value, callback) {
const num = Number(value);
const max = Number(this.form.max);
if (!max || num < max) {
return callback();
}
return callback(new Error("输入值不得大于最大值"));
},
// 最小值判断:不得小于最小值
validateMax(rule, value, callback) {
const num = Number(value);
const min = Number(this.form.min);
if (!min || num > min) {
return callback();
}
return callback(new Error("输入值不得小于最小值"));
},
},
};
</script>
<style scoped lang="scss"></style>