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); } } |
