第13课 Form表单与校验使用el-form搭建规范的表单掌握数据绑定与控件用法配置表单校验规则必填、格式、长度理解prop/rules/model三者的绑定关系实现校验通过才提交的完整流程包含新增与编辑回填场景1. el-form 表单基础1.1 核心组成标签/属性作用类比el-form表单容器整张登记表表格纸el-form-item表单的一行label为该行标题“姓名____”这一行:modelform将表单组件与数据对象绑定答题卡底稿背后的电子记录v-modelform.xxx控件双向绑定到底稿的字段笔尖落进格子1.2 基本模板骨架el-form:modelformlabel-width90pxel-form-itemlabel用户名el-inputv-modelform.nameplaceholder请输入//el-form-itemel-form-itemlabel角色el-selectv-modelform.roleplaceholder请选择el-optionlabel管理员value管理员/el-optionlabel编辑value编辑//el-select/el-form-itemel-form-itemlabel状态el-radio-groupv-modelform.statusel-radiovalue启用启用/el-radioel-radiovalue停用停用/el-radio/el-radio-group/el-form-item/el-formlabel-width统一行标题宽度防止表格歪扭form对象中的每个字段必须设置初始值空字符串否则后续重置时该字段无法被重置2. 校验规则 (rules)2.1 规则配置结构construles{name:[{required:true,message:请输入用户名,trigger:blur},{min:2,max:10,message:长度在 2 到 10 个字符,trigger:blur}],phone:[{required:true,message:请输入手机号,trigger:blur},{validator:checkPhone,trigger:blur}],email:[{required:true,message:请输入邮箱,trigger:blur},{type:email,message:邮箱格式不正确,trigger:blur}],role:[{required:true,message:请选择角色,trigger:change}]}每条规则包含三个要素查什么required/min/type/validator、不通过时说什么message、什么时候查trigger。2.2 常见校验类型类型写法示例适用字段必填{ required: true, message: ..., trigger: blur }所有必填项长度{ min: 2, max: 10, message: ..., trigger: blur }用户名、密码内置格式{ type: email, message: ..., trigger: blur }邮箱、网址自定义格式{ validator: checkFn, trigger: blur }手机号、身份证等trigger 选择规则输入框使用blur失焦时校验避免一边输入一边报错下拉框/单选框使用change值变化立刻校验。2.3 自定义校验函数functioncheckPhone(rule,value,callback){if(!value)returncallback()// 空值交给 required 处理constreg/^1[3-9]\d{9}$/if(reg.test(value)){callback()// 通过不传任何参数}else{callback(newError(手机号格式不正确11位数字))}}validator函数接收三个参数rule规则本身、value当前值、callback结果回调。2.4 让规则生效prop 绑定el-formrefformRef:modelform:rulesrulesel-form-itemlabel用户名propnameel-inputv-modelform.name//el-form-item/el-form核心规则prop的值、rules对象的键名、model对象里的字段名三者必须完全一致。写错任何一个该字段将永不校验。3. 提交、校验与重置3.1 校验与提交Promise 写法constformRefref(null)asyncfunctionhandleSubmit(){try{awaitformRef.value.validate()// 异步校验通过才继续// 能走到这里说明全部校验通过ElMessage.success(提交成功)}catch{ElMessage.error(还有没填对的地方请看红字提示)}}validate()是异步方法必须await等待结果校验通过 → 继续执行 try 内后续代码校验失败 → 直接跳入 catch已在表单项下方显示红字3.2 重置表单functionhandleReset(){formRef.value.resetFields()// 将所有字段恢复到初始值并清除红字}注意resetFields()重置到的是表单对象最初定义时的值如空字符串而非单纯“清空”。因此form中每个字段必须显式定义初始值否则不会被重置。3.3 提交时按钮防连点el-buttontypeprimary:loadingsavingclickhandleSave保存/el-button:loadingsaving保存中按钮显示转圈并禁用saving.value true在请求前设置finally中置回false4. 实战新增/编辑用户弹窗表单4.1 数据层api/user.js// 新增用户模拟后端接口真实项目替换为 axios 请求exportfunctioncreateUser(userData){returnnewPromise((resolve){setTimeout((){constnewUser{id:mockUsers.length1,...userData,createdAt:...}mockUsers.unshift(newUser)// 插入到数组头部列表第一页可见resolve(newUser)},600)})}// 更新用户exportfunctionupdateUser(id,userData){returnnewPromise((resolve){setTimeout((){consttargetmockUsers.find(uu.idid)if(target)Object.assign(target,userData)// 覆盖业务字段resolve(target)},600)})}4.2 弹窗与表单结构UserListView.vueel-dialogv-modeldialogVisible:titleeditingId ? 编辑用户 : 新增用户width480pxel-formrefformRef:modelform:rulesruleslabel-width80pxel-form-itemlabel用户名propnameel-inputv-modelform.name//el-form-item!-- 其他字段... --el-form-itemv-if!editingIdlabel密码proppasswordel-inputv-modelform.passwordtypepasswordshow-password//el-form-item/el-formtemplate#footerel-buttonclickdialogVisible false取消/el-buttonel-buttontypeprimary:loadingsavingclickhandleSave保存/el-button/template/el-dialog密码字段仅在新增时显示v-if!editingId编辑时不显示、不校验弹窗标题根据editingId动态切换4.3 打开弹窗逻辑防止数据残留functionopenDialog(user){formRef.value?.resetFields()// ★ 先重置表单清空输入和红字if(user){// 编辑模式逐字段赋值回填不可直接引用表格行对象editingId.valueuser.id form.nameuser.name form.phoneuser.phone form.emailuser.email form.roleuser.role form.statususer.status form.password}else{editingId.valuenull// 新增模式}dialogVisible.valuetrue}两个关键坑先重置再赋值如果不先resetFields()上次编辑的数据会残留在新增弹窗中逐字段赋值不能将表格行对象直接赋值给formObject.assign(form, user)否则修改表单会污染表格数据同一个引用4.4 保存逻辑asyncfunctionhandleSave(){try{awaitformRef.value.validate()// 校验constpayload{name:form.name,phone:form.phone,email:form.email,role:form.role,status:form.status}saving.valuetrueif(editingId.value){awaitupdateUser(editingId.value,payload)ElMessage.success(修改成功)}else{awaitcreateUser(payload)ElMessage.success(新增成功)}dialogVisible.valuefalseloadUserList()// ★ 重新拉取列表展示最新数据}catch{ElMessage.error(还有没填对的地方请看红字提示)}finally{saving.valuefalse}}5. 常见错误排查现象原因解决所有字段都不校验el-form没挂:rules或所有项缺少prop确保:rulesrules且每个el-form-item写了prop某个字段永远不校验prop与rules键名、model字段名不一致确保三个名称完全一致输入时每敲一个字符就报错输入框的trigger写成了change输入框改用blur下拉/单选用change下拉框选择后无反应下拉框的trigger写成了blur下拉框改为trigger: change点提交不校验也不提示未调用validate()或formRef名称不一致确认formRef.value.validate()已被调用校验失败但代码仍然往下执行validate()未使用await使用try { await validate() } catch { }包裹重置后表单未清空form对象中缺少某些字段的初始值确保所有字段在form中都定义了初始值编辑后再次新增仍显示旧数据打开弹窗前未调用resetFields()在openDialog函数第一行重置表单编辑保存后表格数据未更新保存成功后未刷新列表在handleSave成功回调中调用loadUserList()组件样式丢失裸奔未引入 Element Plus 样式文件在main.js中引入import element-plus/dist/index.css总结表单搭建el-form整张表→el-form-item一行→ 控件 v-model填格子校验规则rules对象为每个字段配置规则prop将规则与表单项绑定三名一致提交流程await validate()→ 通过后执行业务 →finally关闭 loading新增/编辑复用打开弹窗先重置编辑时逐字段回填避免引用污染保存后刷新列表调用接口成功后必须重新请求数据保持界面与数据一致