Solution ①el-fromTo use:modelDo not usev-model
<el-form ref="ruleForm" :model="testForm" label-width="100px" :rules="rules">
Solution②el-from-itemIs there any additionalprop, and confirmpropIs it the same as the written rules?
<el-form-item label="Activity Name" prop="name">
<el-input v-model=""></el-input>
</el-form-item>
// The verification rules prop name are the same rules: {
name: [
{ required: true, message: 'Please enter the activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length between 3 and 5 characters', trigger: 'blur' }
]
}
Solution ③$refs[formName]and$Notes: The former must be passed on when submitting@click="submitForm('ruleForm')"Otherwise it won't take effect
//The official way is $refs[formName] <el-form ref="ruleForm" :model="testForm" label-width="100px" :rules="rules">
<el-form-item label="Activity Name" prop="name">
<el-input v-model=""></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">submit</el-button>
</el-form-item>
<el-form>
data() {
return {
testForm:{
name:'',
},
rules: {
name: [
{ required: true, message: 'Please enter the activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length between 3 and 5 characters', trigger: 'blur' }
]
}
}
},
methods: {
// The first method needs to receive parameters and $refs[formName] submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
('error submit!!');
return false;
}
});
},
//It is also useful online. $ The second way of writing <el-form ref="ruleForm" :model="testForm" label-width="100px" :rules="rules">
<el-form-item label="Activity Name" prop="name">
<el-input v-model=""></el-input>
</el-form-item>
<el-form-item>
// No need to pass parameters. The second method <el-button type="primary" @click="submitForm()">submit</el-button>
</el-form-item>
<el-form>
data() {
return {
testForm:{
name:'',
},
rules: {
name: [
{ required: true, message: 'Please enter the activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length between 3 and 5 characters', trigger: 'blur' }
]
}
}
},
methods: {
// The second method does not require receiving parameters and $ submitForm() {
this.$((valid) => {
if (valid) {
alert('submit!');
} else {
('error submit!!');
return false;
}
});
},
Solution ④ Someone on the Internet said that it is not heredataIt also reports an error in the initial data (not reproduced. The solution is for reference only)
<el-form-item label="Activity Name" prop="name">
<el-input v-model=""></el-input>
</el-form-item>
data() {
return {
// The verification rules prop name are the same testForm:{
name:'',//It means that this location is not declared, name will not take effect. I tested it and it will take effect if it does not declare. For reference only },
rules: {
name: [
{ required: true, message: 'Please enter the activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length between 3 and 5 characters', trigger: 'blur' }
]
}
}
}
Some small problems encountered in daily life are self-recording. I hope everyone will give more opinions and learn together if there are any supplements!
This is the end of this article about solving the problem of element ui From form verification not taking effect. For more related element From form verification content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!