前言
做后台管理表单开发，表单校验是必不可少的。校验失败需要输入框变红，旁边显示错误提示文字；输入正常之后清除错误提示。 很多项目会重复写大量 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 class="form-item"> <input type="text" class="form-input"> <!-- 错误提示，默认隐藏 --> <span class="hint" style="color:red;display:none;"></span> </div> <div class="form-item"> <input type="text" class="form-input"> <span class="hint" style="color:red;display:none;"></span> </div>函数参数详解
- element：jQuery 对象，表单元素集合，比如
$('.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[type="file"]'), 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); })- 如果是
type=file文件框，部分浏览器无法修改 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：关闭错误，恢复默认样式
