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;}});}