前言做后台管理表单开发表单校验是必不可少的。校验失败需要输入框变红旁边显示错误提示文字输入正常之后清除错误提示。 很多项目会重复写大量 DOM 操作代码这里封装两个通用 jQuery 工具函数showHint、hideHint实现显示错误提示、隐藏错误提示支持一组表单元素按索引定位复用性很强。技术栈jQuery适用于后台管理表单。完整源码/** * 提示文字显示隐藏函数 * param {jQuery Object} element - 对应的表单元素jQuery对象 * param {string} text - 提示文字文本 * param {number} num - 提示文字的索引 */ // 显示提示 function showHint(element, text, num) { num num || 0 // 获取到提示元素 let hintElement $(element).eq(num).siblings(.hint) // 显示提示 hintElement.css(display, block) // 添加类名使非图片输入框变为红色 $(element).eq(num).css(border, 1px solid red) // 添加提示文本 hintElement.text(text) } // 隐藏提示 function hideHint(element, num) { num num || 0; $(element).eq(num).siblings(.hint).css(display, none) $(element).eq(num).css(border, 1px solid #ddd) }HTML 结构示例.hint作为错误提示容器和表单输入框是兄弟siblings关系。div classform-item input typetext classform-input !-- 错误提示默认隐藏 -- span classhint stylecolor:red;display:none;/span /div div classform-item input typetext classform-input span classhint stylecolor:red;display:none;/span /div函数参数详解elementjQuery 对象表单元素集合比如$(.form-input)支持多个同类型输入框。text错误提示文案仅showHint使用。num索引默认为 0当页面有多个相同表单元素时指定操作第几个 DOM。使用示例示例 1单个输入框校验let inputs $(.form-input); let val inputs.eq(0).val().trim(); if(val ){ // 第0个输入框提示不能为空 showHint(inputs, 内容不能为空, 0); }else{ // 校验通过清除提示 hideHint(inputs,0); }示例 2循环批量校验多个表单let inputs $(.form-input); let flag true; inputs.each(function(index){ let value $(this).val().trim(); if(value ){ showHint(inputs, 该项不能为空, index); flag false; }else{ hideHint(inputs, index); } }) if(!flag){ return; // 表单阻止提交 }示例 3结合之前图片上传代码使用之前图片上传回调里面有showError可以直接替换为本函数。//图片上传失败业务报错 if (res.code ! 1) { // 给文件上传元素提示错误 showHint($(input[typefile]), res.msg, 0); }核心原理讲解$(element).eq(num)根据索引取集合中第 N 个表单 DOM兼容页面多个相同输入框。.siblings(.hint)查找同级兄弟元素.hint错误提示标签不需要写固定 id通用性强。showHint显示 hint 标签输入框边框变红写入错误文本。hideHint隐藏 hint 标签恢复输入框默认灰色边框。num num || 0参数兜底如果不传索引默认操作第一个元素。踩坑点总结DOM 结构必须匹配.hint必须是表单元素的同级兄弟节点否则siblings()找不到元素。element 必须传 jQuery 集合对象不要传原生 dom。多表单循环校验的时候index 索引一定要对应否则错误提示会错位。输入框重新输入时记得调用hideHint()清除错误样式否则红色边框和提示文字不会自动消失。//输入框input事件实时清除错误提示 $(.form-input).on(input,function(){ let idx $(.form-input).index(this); hideHint($(.form-input),idx); })如果是typefile文件框部分浏览器无法修改 border 样式可以加判断跳过边框修改。扩展优化建议当前版本是 css 直接写在行内项目大的时候建议切换 class 类名控制样式便于维护。//优化版使用class代替行内css function showHint(element, text, num) { num num || 0 let hintElement $(element).eq(num).siblings(.hint) hintElement.show().text(text); $(element).eq(num).addClass(input-error); } function hideHint(element, num) { num num || 0; $(element).eq(num).siblings(.hint).hide(); $(element).eq(num).removeClass(input-error); }css.input-error{ border:1px solid red !important; } .hint{ color: red; display: none; }小结这套提示函数适合 jQuery 后台表单系统不需要每个表单写 id依靠集合 索引 siblings 兄弟查找实现通用错误提示。showHint展示错误变红 提示文字hideHint关闭错误恢复默认样式