JEECG 3.7.8 新版表單校驗提示風格使用&升級方法（validform 新風格)

JEECG 表單校驗新提示風格使用講解&升級方法

 （validform 新風格漂亮，佈局簡單)

JEECG 表單校驗採用的是validform，默認的校驗提示須要佔用頁面佈局，提示效果較傳統。jeecg這個自定義的校驗提示風格，不佔用頁面佈局，提示效果也更美觀，簡單易用，讓表單看起來更漂亮！！！此文章絕對福利貼。。。

1、【初體驗】JEECG validform 新版校驗提示風格如圖：

2、【快速使用】表單校驗新版提示如何使用呢？

場景一： 若是你的jeecg已經升級到最新版 3.7.8+，那你能夠很簡單的使用新版提示風格

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

   t:formvalid標籤設置 tiptype="6"

<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. /* * 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;}

【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. }

【3】、formvalid標籤代碼邏輯集成（org/jeecgframework/tag/core/easyui/FormValidationTag.java）

            FormValidationTag代碼修改：擴展tiptype值爲6時展現該效果

    3.一、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>");

4. }

   3.二、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. }

方式二：【原生態寫法】不使用標籤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>

【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. }