Element form validation for handling dynamic data loops

Mercury_ 2022-06-23 14:24:49 阅读数:198

elementformvalidationhandlingdynamic

Preface

Form is one of the most frequently used components in daily development , Form validation is also particularly important , It can not only check invalid or incorrect data entered by the user , You can also check the required options that the user has missed , Generally speaking , To implement a form validation, we just need to rules Property dynamic binding validation rules , And will el-form-item Of prop Property is set to the field name of the verification ; But if there are form items generated circularly in the form , How to verify ?

Realization effect :
 Insert picture description here

Realize the idea :

It's easy to do this , The core is to modify every el-form-item in prop Bound property value . By default, we will directly prop Dynamically bind to the fields of the verification rule ; When there is a circularly generated form body in the form , We need to change prop Writing , Here's the picture :

 Insert picture description here

Be careful : In each cycle, you need to add rules

Source code is as follows :

<template>
<div class="formBox">
<h2> Form validation of dynamic data circulation </h2>
<!-- Forms -->
<el-form :model="ruleForm" ref="formRef" :rules="rules" size="medium">
<div class="formContantBox" v-for="(item,index) in ruleForm.formData" :key="index">
<div>
<el-form-item :prop="'formData.'+index+'.name'" :rules="rules.name">
<el-input placeholder=" Please enter a name " v-model="item.name" clearable></el-input>
</el-form-item>
</div>
<div>
<el-form-item :prop="'formData.'+index+'.age'" :rules="rules.age">
<el-input placeholder=" Please enter age " v-model="item.age" clearable></el-input>
</el-form-item>
</div>
<!-- Delete button -->
<div v-if="ruleForm.formData.length>'1'">
<el-button size="medium" type="danger" @click="remove(index)"> Delete </el-button>
</div>
</div>
</el-form>
<!-- add to / Save button -->
<div>
<el-button size="medium" type="success" @click="addition"> add to </el-button>
<el-button size="medium" type="primary" @click="preserve('form')"> preservation </el-button>
</div>
</div>
</template>
<script>
export default {

data() {

return {

// Validation rules 
rules: {

name: [{
 required: true, message: " Please enter a name ", trigger: "blur" }],
age: [{
 required: true, message: " Please enter age ", trigger: "blur" }],
},
// Data binding 
ruleForm: {

formData: [
{

name: "",
age: "",
},
],
},
};
},
methods: {

// Add event 
addition() {

this.ruleForm.formData.push({

name: "",
age: "",
});
},
// Delete event 
remove(index) {

this.ruleForm.formData.splice(index, 1);
},
// Submit the incident 
preserve() {

this.$refs.formRef.validate((valid) => {

if (valid) {

console.log(" Submit successfully !");
} else {

console.log(" Failure !");
return false;
}
});
},
},
};
</script>
<style scoped>
.formBox {

margin: 20px;
padding: 20px;
background: white;
border-radius: 30px;
}
h2 {

margin-bottom: 20px;
}
.formContantBox {

display: flex;
}
.formContantBox div {

margin-right: 4px;
}
</style>

About vue How to add forms gracefully and dynamically , You can move on to another blog post (vue Add forms dynamically )

版权声明:本文为[Mercury_]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/174/202206231330038432.html