FastAdmin 修改表单验证错误提示信息位置, 从 Right 改到 Top 或者 Bottom

背景

使用 fastadmin 自动生成的 form 表单, 涉及到多级联动. 验证提示语的位置产生了混乱. 如图

erro.png

解决方案

• 找到 \public\assets\js\require-form.js 大概在 15 行左右

  //绑定表单事件
  form.validator($.extend({
      validClass: 'has-success',
      invalidClass: 'has-error',
      bindClassTo: '.form-group',
      formClass: 'n-default n-bootstrap',
      msgClass: 'n-bottom', // 只修改了这个属性, 由原来的 "n-right" ==> "n-bottom"
      stopOnError: true,
  

• 提示语可能会和下一行的input 重合, 修改提示语 css 样式. \public\assets\libs\nice-validator\dist\jquery.validator.css 大概在 140 行左右 (个人需求, 可改可不改)

  
  .n-bottom .msg-wrap {
      margin-top: 2px; // 修改了下间距, 由原来的 "6px" ==> "2px"
  }
  
  

结果

result.png

总结

写的不好, 还请各位大佬, 多多指点! 多多交流! (手动抱拳)(手动抱拳)(手动抱拳)!

官方文档