Issues related to vue form validation in element

This article mainly introduces the solution of element combined with vue under form verification, but prompting an error when there is a value. Friends who need it can refer to it

The bound value must be the same as the value specified by the rule -------

Step one:

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

Add rules ref

Part two:

<el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item>

Add prop

Part 3:

rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
}

If required is added here, there is no need to add it after the prop; for other detailed verifications here, please see the document

Part 4: Click to submit the form

(Here is a place to remember , <el-button type="primary" @click="submitForm('ruleForm')">Submit form</el-button> This must be enclosed in quotation marks, get it done

submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {

Here is what to do after the verification is successful

} else {
console.log('error submit!!');
return false;
}
});
},

The above is what I compiled for everyone, I hope it will be helpful to everyone in the future.

Related articles:

How to get the specified index value with jquery

How to implement the side sliding menu in MUI

The problem of off-canvas sliding beyond the part in the mui framework

How to use better-scroll in vue2.0 to realize mobile sliding

Using cli mui in Vue related to area scrolling issues

Online paid courses in vue (detailed tutorial)

The above is the detailed content of Issues related to vue form validation in element. For more information, please follow other related articles on the PHP Chinese website!