不用alert弹出窗口的方法来显示验证信息

最近由于工作的需要在开发公司内部的OA系统，无意中发现以前的系统或多或少存在一些不太友善的操作，其中一个对每个操作的返回信息——以类似JS中alert的方法弹出系统内置的对话框提示。相信很多朋友现在还会用这种传统的方法。但个人觉得此方法在当今WEB 2.0的潮流中不但给用户在视觉上产生审美疲劳，同时也会增加用户的操作（至少要按一下键盘或者点一下鼠标才能取消话框）。于是本人简单设计了一个更友善的技巧来替换此传统的方法。下面用一个简单的文本输入验证为例——

打开演示地址

该实例中“页面路径”输入框是必填的，所以当输入为空并按“验证”按钮时，提示信息会在页面上方动态显示，并稍后自动消失。这样，用户既能看到反馈信息，又省去了点击对话框的功夫。下面列出关键的源码部分——

var T_result;
function F_resultShow(rText,rStyle,P_TObj){
var resultID = ’resultShow’;
if($(’#’+resultID).html()){
$(’#’+resultID).remove();
clearTimeout(T_result);
}
else{
var resultShow = $(’<div></div>’);
with(resultShow){
attr(’id’,resultID);
html(rText);
addClass(rStyle);
prependTo(P_TObj);
}
T_result = setTimeout("F_resultShow(’"+rText+"’,’"+rStyle+"’,’"+P_TObj+"’)",1500);
}
}
其中，“P_TObj”是提示信息在哪显示，实例中是在body中显示，所以用’body’。如果想要在某个对象中显示，可以赋值为$(’#对象ID’)。而为了增加一些视觉上的UI效果，实例中还添加了鼠标聚焦到输入框的动态背景显示，对应源码——

//------------- 输入框的鼠标事件 ----------------
with($(’input[type=text]’)){
focus(function(){
$(this).removeClass(’input_1’);
$(this).addClass(’input_2’);
});
blur(function(){
$(this).removeClass(’input_2’);
$(this).addClass(’input_1’);
});
}
//---------------------------------------------