SoFunction
Updated on 2025-04-05

Example code for el-form form verification

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!