必须放弃lay-vertype="tips"，改用DOM插入+绝对定位实现右侧静态红字：在.input同级添加.verify-right容器，利用.layui-form-item的relative定位，通过CSS绝对定位到右侧，验证时用$(elem).next()精准操作提示文字。
用 lay-vertype="tips" + 自定义 CSS 实现右侧静态红字
默认 lay-vertype="tips" 是悬浮气泡，不是右侧静态红字。要达成“右侧显示、不浮动、红色、不遮挡、不随滚动偏移”，必须放弃内置提示逻辑，改用 dom 插入 + 绝对定位。
关键点是：Layui 的 .layui-form-item 默认是 position: relative，这为绝对定位提供了锚点基础——不用额外加样式，直接利用它。
- 在 HTML 中为每个需验证的输入框后手动加一个空提示容器，比如
<div class="verify-right"></div>，放在.layui-input-block内部、<input>同级 - 给该容器加 CSS：
.verify-right { position: absolute; top: 50%; right: 0; transform: translateY(-50%); color: #FF5722; font-size: 12px; line-height: 1; white-space: nowrap; } - 注意不要用
float: right或display: inline-block，它们会破坏.layui-input-block的 flex 布局，尤其在响应式下导致输入框错位或换行
form.verify() 回调里操作 elem 同级元素
验证函数第二个参数 elem 就是当前 input 元素本身，它是可靠的 DOM 引用，比用 ID 或 class 查找更稳定，尤其在动态渲染或重复表单项场景下。
不要写 $('#username').next('.verify-right')，而要用 $(elem).next('.verify-right') —— 这样不管这个 input 在哪个 .layui-form-item 里，都能精准找到它右边的提示容器。
- 验证失败时：用
$(elem).next('.verify-right').text('4–12位字母数字下划线') - 验证通过或清空时：用
$(elem).next('.verify-right').text('')，避免残留旧提示 - 不要用
layer.tips()，它的定位基于 viewport，无法固定在输入框右侧；且移动端滚动时极易错位
为什么不能依赖 lay-reqtext 或 return 字符串
lay-reqtext 只控制提示文本内容，不影响位置；而 form.verify 中 return 字符串会触发 Layui 默认的 tips 气泡，位置不可控、样式不可定制、无法实现“右侧静态”效果。
- 返回字符串（如
return '用户名不能为空'）→ 触发默认tips气泡 → 显示在 input 上方/右侧浮动层 → 不满足“静态”“红字”“右侧贴边”要求 - 返回
false→ 阻止提交但不触发任何提示 → 必须自行插入提示元素 - 想完全接管提示行为，就必须在回调里手动操作 DOM，不依赖 Layui 的提示渲染链
容易忽略的兼容性细节
右侧定位看似简单，但在真实项目中常因几个细节失效：父容器没设 position: relative、提示容器被 overflow: hidden 截断、flex 子项收缩导致 right: 0 失效。
- 确保
.layui-form-item没被覆盖position样式（检查浏览器开发者工具 computed 样式） - 如果提示文字被截断或看不见，检查
.layui-input-block或其父级是否有overflow: hidden - 若输入框宽度自适应（如
width: 100%），right: 0仍有效；但若用了flex: 1且未设最小宽度，某些老版 Chrome 下可能计算异常 - 移动端 Safari 对
transform: translateY(-50%)支持良好，无需前缀；但若配合 zoom 或 viewport 缩放，建议加will-change: transform防闪烁
