JEECG 3.7.8 新版表单校验提示风格使用&升级方法（validform 新风格漂亮，布局简单)

JEECG 表单校验采用的是validform，默认的校验提示需要占用页面布局，提示效果较传统。jeecg这个自定义的校验提示风格，不占用页面布局，提示效果也更美观，简单易用，让表单看起来更漂亮！！！此文章绝对福利贴。。。

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

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

 

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

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

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

1 <t:formvalid formid= "formobj2"  tiptype= "6"  >

场景二： 如果你的jeecg未升级到最新版 3.7.8+，那你采用以下方法进行手工升级...

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 /* * css: 表单校验提示 * ----------*/    .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;border: solid 1px #B94A48;border-radius: 2px;box-shadow:  0  0  3px #ddd;}    .poptip-arrow{position: absolute;overflow: hidden;font-style: normal;font-family: simsun;text-shadow: 0  0  2px #ccc;}    .poptip-arrow em,.poptip-arrow i{position: absolute;left: 0 ;top: 0 ;font-style: normal;}    .poptip-arrow em{color: #B94A48;}    .poptip-arrow i{color: #B94A48;text-shadow:none;}    .poptip-arrow-top,.poptip-arrow-bottom{height: 6px;width: 12px;left:12px;margin-left:-6px;}    .poptip-arrow-left,.poptip-arrow-right{height: 12px;width: 6px;top: 12px;margin-top:-6px;}    .poptip-arrow-top{top: -6px;}    .poptip-arrow-top em{top: -1px;}    .poptip-arrow-top i{top: 0px;}    .poptip-arrow-bottom{bottom: -6px;}    .poptip-arrow-bottom em{top: -8px;}    .poptip-arrow-bottom i{top: -9px;}    .poptip-arrow-left{left:-6px;}    .poptip-arrow-left em{left:1px;}    .poptip-arrow-left i{left:2px;}    .poptip-arrow-right{right:-6px;}    .poptip-arrow-right em{left:-6px;}    .poptip-arrow-right i{left:-7px;}

　　

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 //提示信息    function validationMessage(obj, Validatemsg) {    try  {    removeMessage(obj);    obj.focus();    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' )    $( 'body' ).append($poptip_error);    if  (obj.hasClass( 'form-control' ) || obj.hasClass( 'ui-select' )) {    obj.parent().addClass( 'has-error' );    }    if  (obj.hasClass( 'ui-select' )) {    $( '.input-error' ).remove();    }    obj.change(function () {    if  (obj.val()) {    removeMessage(obj);    }    });    if  (obj.hasClass( 'ui-select' )) {    $(document).click(function (e) {    if  (obj.attr( 'data-value' )) {    removeMessage(obj);    }    e.stopPropagation();    });    }    return  false ;    }  catch  (e) {    alert(e)    }    }    //移除提示    function removeMessage(obj) {    obj.parent().removeClass( 'has-error' );    $( '.poptip' ).remove();    $( '.input-error' ).remove();    }

　　

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

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

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

1 2 3 4 5 6 7 if ( "6" .equals(tiptype)){    sb.append( "<link rel=\"stylesheet\" href=\"plug-in/Validform/css/tiptype.css\" type=\"text/css\"/>" );    sb.append( "<script type=\"text/javascript\" src=\"plug-in/Validform/js/tiptype.js\"></script>" );    }

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 else  if ( "6" .equals(tiptype)){    sb.append( "tiptype:function(msg,o,cssctl){" );    sb.append( "if(o.type==3){" );    sb.append( " ValidationMessage(o.obj,msg);" );    sb.append( "}else{" );    sb.append( "removeMessage(o.obj);" );    sb.append( "}" );    sb.append( "}," );    }

　　

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 tiptype:function(msg,o,cssctl){    if (o.type== 3 ){    validationMessage(o.obj,msg);    } else {    removeMessage(o.obj);    }    }

 

转载于:https://www.cnblogs.com/Jeely/p/11309858.html

相关资源：最新版 Python-3.7.8.tgz