您的位置：首页 > 其它

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

2018-08-09 14:36 477 查看

JEECG表单校验新提示风格使用讲解&升级方法

（validform新风格漂亮，布局简单)

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

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

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

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

【使用方法】JEECG3.7.8及以上版本使用方法：

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

<t:formvalidformid="formobj2"tiptype="6">

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

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

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

/**css:表单校验提示*----------*/

.poptip{z-index:1000;position:absolute;top:20px;left:20px;padding:6px10px6px;*padding:7px10px5px;line-height:16px;color:#fff;font-size:12px;background-color:#B94A48;border:solid1px#B94A48;border-radius:2px;box-shadow:003px#ddd;}

.poptip-arrow{position:absolute;overflow:hidden;font-style:normal;font-family:simsun;text-shadow:002px#ccc;}

.poptip-arrowem,.poptip-arrowi{position:absolute;left:0;top:0;font-style:normal;}

.poptip-arrowem{color:#B94A48;}

.poptip-arrowi{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-topem{top:-1px;}

.poptip-arrow-topi{top:0px;}

.poptip-arrow-bottom{bottom:-6px;}

.poptip-arrow-bottomem{top:-8px;}

.poptip-arrow-bottomi{top:-9px;}

.poptip-arrow-left{left:-6px;}

.poptip-arrow-leftem{left:1px;}

.poptip-arrow-lefti{left:2px;}

.poptip-arrow-right{right:-6px;}

.poptip-arrow-rightem{left:-6px;}

.poptip-arrow-righti{left:-7px;}

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

//提示信息

functionvalidationMessage(obj,Validatemsg){

try{

removeMessage(obj);

obj.focus();

var$poptip_error=$('<divclass="poptip"><spanclass="poptip-arrowpoptip-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();

});

}

returnfalse;

}catch(e){

alert(e)

}

}

//移除提示

functionremoveMessage(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时引入)

if("6".equals(tiptype)){

sb.append("<linkrel=\"stylesheet\"href=\"plug-in/Validform/css/tiptype.css\"type=\"text/css\"/>");

sb.append("<scripttype=\"text/javascript\"src=\"plug-in/Validform/js/tiptype.js\"></script>");

}

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

elseif("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

<linkrel="stylesheet"href="plug-in/Validform/css/tiptype.css"type="text/css"/>

<scripttype="text/javascript"src="plug-in/Validform/js/tiptype.js"></script>

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

tiptype:function(msg,o,cssctl){

if(o.type==3){

validationMessage(o.obj,msg);

}else{

removeMessage(o.obj);

}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Validform JEECG

相关文章推荐

新的分享

章节导航