JEECG 表單校驗(yàn)新提示風(fēng)格使用講解&升級(jí)方法

?（validform 新風(fēng)格漂亮，布局簡(jiǎn)單)

JEECG 表單校驗(yàn)采用的是validform，默認(rèn)的校驗(yàn)提示需要占用頁(yè)面布局，提示效果較傳統(tǒng)。jeecg這個(gè)自定義的校驗(yàn)提示風(fēng)格，不占用頁(yè)面布局，提示效果也更美觀，簡(jiǎn)單易用，讓表單看起來(lái)更漂亮！！！此文章絕對(duì)福利貼。。。

一、【初體驗(yàn)】JEECG validform 新版校驗(yàn)提示風(fēng)格如圖：

二、【快速使用】表單校驗(yàn)新版提示如何使用呢？

?

場(chǎng)景一： 如果你的jeecg已經(jīng)升級(jí)到最新版 3.7.8+，那你可以很簡(jiǎn)單的使用新版提示風(fēng)格

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

? ?t:formvalid標(biāo)簽設(shè)置?tiptype="6"

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

?

場(chǎng)景二： 如果你的jeecg未升級(jí)到最新版 3.7.8+，那你采用以下方法進(jìn)行手工升級(jí)...

方式一：【UI標(biāo)簽用法】JEECG 3.7.7及以下版本formvalid標(biāo)簽升級(jí)方法如下：

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

/* * css: 表單校驗(yàn)提示 * ----------*/ .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;} .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】、增加提示框相關(guān)js（src/main/webapp/plug-in/Validform/js/tiptype.js）

//提示信息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標(biāo)簽代碼邏輯集成（org/jeecgframework/tag/core/easyui/FormValidationTag.java）

? ? ? ? ? ? FormValidationTag代碼修改：擴(kuò)展tiptype值為6時(shí)展示該效果

? ? 3.1、doEndTag()方法中開(kāi)始位置，引入（1）（2）中的css?和js(tiptype值為6時(shí)引入)

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針對(duì)不同值的處理邏輯，添加tiptype值為6時(shí)的邏輯處理

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("},"); }

方式二：【原生態(tài)寫(xiě)法】不使用標(biāo)簽validform提交表單，升級(jí)方法如下

【1】、頁(yè)面引入2中的css和js

<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組件調(diào)用時(shí)設(shè)置tiptype如下：

tiptype:function(msg,o,cssctl){if(o.type==3){validationMessage(o.obj,msg);}else{removeMessage(o.obj);}}

?

總結(jié)

以上是生活随笔為你收集整理的JEECG 3.7.8 新版表单校验提示风格使用升级方法（validform 新风格漂亮，布局简单)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。