when using the ELement-ui form, you want to verify the number type. If you write type= "number" in the verification rule, it will have no effect. online running address
try to add a number modifier on < el-input vmurmodel.number = "ruleForm.age" > < / el-input >, invalid
the related code is as follows
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm("ruleForm")"></el-button>
<el-button @click="resetForm("ruleForm")"></el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data () {
return {
ruleForm: {
age: ""
},
rules: {
age: [
{ required: false, message: "", trigger: "blur" },
{ type: "number", message: "", trigger: "blur" },
{ min: 1, max: 3, message: " 1 3 ", trigger: "blur" }
]
}
};
},
methods: {
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm (formName) {
this.$refs[formName].resetFields();
}
}
};
</script>