In the front-end form implementation, the rules attribute passes into the agreed verification rules, and sets the prop attribute of form-Item to a special key value that needs to be verified.
<el-form ref="ruleFormRef" :model="interviewForm" label-position="left" require-asterisk-position="right" :rules="rules" label-width="90px" style="max-width: 600px" status-icon size="middle"> <el-form-item label="Interview Name" prop="interviewName"> <el-input v-model="" placeholder="Please enter" /> </el-form-item> <el-form-item label="Interview Type" prop="interviewType"> <el-radio-group v-model="" > <el-radio-button :label="type" :value="type" v-for="type, index in interviewTypeList" /> </el-radio-group> </el-form-item> <div v-if=" == 'Employment'"> <el-form-item label="Position Name" prop="jobTitle"> <el-input v-model="" placeholder="Please enter" /> </el-form-item> <el-form-item label="Position Description" > <el-input v-model="" type="textarea" /> </el-form-item> <el-form-item label="Term of Work" prop="jobYear"> <el-input-number v-model="" :min="0" placeholder="Please enter" /> </el-form-item> </div> <el-form-item> <el-button type="primary" @click="submitForm">submit</el-button> <el-button @click="resetForm">Reset</el-button> </el-form-item> </el-form>
Some verification rules are as follows
rules: { interviewName: [ { required: true, message: 'Please enter the interview name', trigger: 'blur' }, { min: 1, max: 10, message: 'The length should be between 1 and 10 characters', trigger: 'blur' }, ], jobTitle: [ { required: true, message: 'Please enter the job name', trigger: 'blur' }, { min: 1, max: 10, message: 'The length should be between 1 and 10 characters', trigger: 'blur' }, ], }
Verify form data when clicking Submit
submitForm() { #this.$refs is an object provided by Vue that contains all child components or DOM elements registered with the ref attribute. #ruleFormRef is the ref name set on the el-form component, so this.$ references this el-form component instance. #validate is a method on an el-form component instance that triggers the verification of a form. It validates every field of the form based on the validation rules defined in the rules property. this.$((valid) => { if (valid) { alert('Form verification was successful!'); } else { ('Form verification failed!'); return false; } }); }
This is the article about the example code for el-form form verification. For more related el-form 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!