关注JEECG发展历程 关注最新动态和版本, 记录JEECG成长点滴 更新日志 - 技术支持 - 招聘英才

JEECG最新版本下载 JEECG智能开发平台 - 显著提高开发效率 常见问题 - 入门视频 - 参与开源团队

商务QQ: 69893005、418799587 商务热线(5*8小时): 010-64808099 官方邮箱: jeecgos@163.com

查看: 10994|回复: 0

JEECG 3.7.8 新版表单校验提示风格使用&升级方法(validform 新...

[复制链接]
发表于 2018-8-9 14:23:14 | 显示全部楼层 |阅读模式
JEECG 表单校验新提示风格使用讲解&升级方法 (validform 新风格漂亮,布局简单)
    JEECG 表单校验采用的是validform,默认的校验提示需要占用页面布局,提示效果较传统。jeecg这个自定义的校验提示风格,不占用页面布局,提示效果也更美观,简单易用,让表单看起来更漂亮!!!此文章绝对福利贴。。。

一、【初体验】JEECG validform 新版校验提示风格如图:

11.png


二、【快速使用】表单校验新版提示如何使用呢?

场景一: 如果你的jeecg已经升级到最新版 3.7.8+,那你可以很简单的使用新版提示风格

【使用方法】 JEECG 3.7.8及以上版本使用方法:

   t:formvalid标签设置 tiptype="6"

  1. <t:formvalid formid="formobj2" tiptype="6" ></font>
复制代码
场景二: 如果你的jeecg未升级到最新版 3.7.8+,那你采用以下方法进行手工升级...

方式一:【UI标签用法】JEECG 3.7.7及以下版本formvalid标签升级方法如下:

【1】、增加提示框样式文件(/src/main/webapp/plug-in/Validform/css/tiptype.css)

  1. /* * css: 表单校验提示 * ----------*/
  2. .poptip{z-index:1000;position: absolute;top: 20px;left:20px;padding: 6px 10px 6px;*padding: 7px 10px 5px;line-height: 16px;color: #fff;font-size: 12px;background-color: #B94A48;border: solid 1px #B94A48;border-radius: 2px;box-shadow: 0 0 3px #ddd;}
  3. .poptip-arrow{position: absolute;overflow: hidden;font-style: normal;font-family: simsun;text-shadow:0 0 2px #ccc;}
  4. .poptip-arrow em,.poptip-arrow i{position: absolute;left:0;top:0;font-style: normal;}
  5. .poptip-arrow em{color: #B94A48;}
  6. .poptip-arrow i{color: #B94A48;text-shadow:none;}
  7. .poptip-arrow-top,.poptip-arrow-bottom{height: 6px;width: 12px;left:12px;margin-left:-6px;}
  8. .poptip-arrow-left,.poptip-arrow-right{height: 12px;width: 6px;top: 12px;margin-top:-6px;}
  9. .poptip-arrow-top{top: -6px;}
  10. .poptip-arrow-top em{top: -1px;}
  11. .poptip-arrow-top i{top: 0px;}
  12. .poptip-arrow-bottom{bottom: -6px;}
  13. .poptip-arrow-bottom em{top: -8px;}
  14. .poptip-arrow-bottom i{top: -9px;}
  15. .poptip-arrow-left{left:-6px;}
  16. .poptip-arrow-left em{left:1px;}
  17. .poptip-arrow-left i{left:2px;}
  18. .poptip-arrow-right{right:-6px;}
  19. .poptip-arrow-right em{left:-6px;}
  20. .poptip-arrow-right i{left:-7px;}</font>
复制代码

【2】、增加提示框相关js(src/main/webapp/plug-in/Validform/js/tiptype.js)

  1. //提示信息
  2.   function validationMessage(obj, Validatemsg) {
  3.       try {
  4.           removeMessage(obj);
  5.           obj.focus();
  6.           var $poptip_error = $('<div class="poptip"><span class="poptip-arrow poptip-arrow-top"><em>◆</em></span>' + Validatemsg + '</div>').css("left", obj.offset().left + 'px').css("top", obj.offset().top + obj.parent().height() + 5 + 'px')
  7.           $('body').append($poptip_error);
  8.           if (obj.hasClass('form-control') || obj.hasClass('ui-select')) {
  9.               obj.parent().addClass('has-error');
  10.           }
  11.           if (obj.hasClass('ui-select')) {
  12.               $('.input-error').remove();
  13.           }
  14.           obj.change(function () {
  15.               if (obj.val()) {
  16.                   removeMessage(obj);
  17.               }
  18.           });
  19.           if (obj.hasClass('ui-select')) {
  20.               $(document).click(function (e) {
  21.                   if (obj.attr('data-value')) {
  22.                       removeMessage(obj);
  23.                   }
  24.                   e.stopPropagation();
  25.               });
  26.           }
  27.           return false;
  28.       } catch (e) {
  29.           alert(e)
  30.       }
  31.   }
  32.   //移除提示
  33.   function removeMessage(obj) {
  34.       obj.parent().removeClass('has-error');
  35.       $('.poptip').remove();
  36.       $('.input-error').remove();
  37.   }</font>
复制代码

【3】、formvalid标签代码逻辑集成(org/jeecgframework/tag/core/easyui/FormValidationTag.java)

            FormValidationTag代码修改:扩展tiptype值为6时展示该效果

    3.1、doEndTag()方法中开始位置,引入(1)(2)中的css 和js(tiptype值为6时引入)

  1. if("6".equals(tiptype)){
  2.         sb.append("<link rel="stylesheet" href="plug-in/Validform/css/tiptype.css" type="text/css"/>");
  3.         sb.append("<script type="text/javascript" src="plug-in/Validform/js/tiptype.js"></script>");</font></span>
复制代码

   3.2、doEndTag()方法中找到tiptype针对不同值的处理逻辑,添加tiptype值为6时的逻辑处理

  1. else if("6".equals(tiptype)){
  2.         sb.append("tiptype:function(msg,o,cssctl){");
  3.         sb.append("if(o.type==3){");
  4.         sb.append(" ValidationMessage(o.obj,msg);");
  5.         sb.append("}else{");
  6.         sb.append("removeMessage(o.obj);");
  7.         sb.append("}");
  8.         sb.append("},");
  9. }</font>
复制代码

方式二:【原生态写法】不使用标签validform提交表单,升级方法如下


【1】、页面引入2中的css和js

  1. <link rel="stylesheet" href="plug-in/Validform/css/tiptype.css" type="text/css"/>
  2. <script type="text/javascript" src="plug-in/Validform/js/tiptype.js"></script></font>
复制代码

【2】、validform组件自定义tiptype,validform组件调用时设置tiptype如下:

  1. tiptype:function(msg,o,cssctl){
  2.         if(o.type==3){
  3.              validationMessage(o.obj,msg);
  4.         }else{
  5.              removeMessage(o.obj);
  6.         }
  7.   }</font>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表