el-form表单实现校验

前端表单实现， rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。

 <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="面试名称" prop="interviewName">
    	<el-input v-model="interviewForm.interviewName" placeholder="请输入" />
    </el-form-item>

     <el-form-item label="面试类型" prop="interviewType">
		<el-radio-group v-model="interviewForm.interviewType" >
     <el-radio-button :label="type" :value="type" v-for="type, index in interviewTypeList" />
         </el-radio-group>
     </el-form-item>
                   
    <div v-if="interviewForm.interviewType == '就业'">
         <el-form-item label="岗位名称" prop="jobTitle">
             <el-input v-model="interviewForm.jobTitle" placeholder="请输入" />
        </el-form-item>
		<el-form-item label="岗位描述" >
             <el-input v-model="interviewForm.jobDesc" type="textarea" />
        </el-form-item>
		<el-form-item label="工作年限" prop="jobYear">
             <el-input-number v-model="interviewForm.jobYear" :min="0" placeholder="请输入" />
        </el-form-item>
    </div>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
 </el-form>

部分验证规则如下

  rules: {
  		interviewName: [
           { required: true, message: '请输入面试名称', trigger: 'blur' },
           { min: 1, max: 10, message: '长度应该在1到10个字符之间', trigger: 'blur' },
        ],
 		jobTitle: [
           { required: true, message: '请输入岗位名称', trigger: 'blur' },
           { min: 1, max: 10, message: '长度应该在1到10个字符之间', trigger: 'blur' },
        ],
	}	

点击提交时验证表单数据

   submitForm() {
   #this.$refs 是 Vue 提供的一个对象，包含所有使用 ref 属性注册的子组件或 DOM 元素。
   #ruleFormRef 是在 el-form 组件上设置的 ref 名称，因此 this.$refs.ruleFormRef 引用了这个 el-form 组件实例。
   #validate 是 el-form 组件实例上的一个方法，用于触发表单的验证。它会根据 rules 属性中定义的验证规则来验证表单的每一个字段。
      this.$refs.ruleFormRef.validate((valid) => {
        if (valid) {
          alert('表单验证成功!');
        } else {
          console.log('表单验证失败!');
          return false;
        }
      });
    }