不弹出alert窗口显示验证信息,Ajax无刷新方式

 首页 > 网页特效 > 表单按钮 > 不弹出alert窗口显示验证信息,Ajax无刷新方式

不弹出alert窗口显示验证信息,Ajax无刷新方式

 2018-08-04  617  收藏  0 赞一个  0 真差劲  0 去评论

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>不用alert弹出窗口显示验证信息</title>
<style type="text/css"> 
h1 {
	font-size: 12px;
	line-height: 24px;
	color: #FFF;
	background-color: #396384;
	text-align: center;
	margin: 0px;
	padding: 0px;
}
 
.Column {
	color: #314f6a;
	background-color: #d1dfeb;
	text-align: right;
	padding-right: 6px;
	line-height: 24px;
	font-size: 12px;
}
.Column.width1 {
	width: 90px;
}
 
.bt {
	height: 22px;
	color: #314f6a;
	font-size: 12px;
	border: 1px solid #668CA2;
	background-repeat: repeat-x;
	cursor: pointer;
	background-color: #FFFFFF;
	line-height: 18px;
	margin-top: 2px;
	margin-bottom: 2px;
	letter-spacing: 0.1em;
	padding-top: 0px;
	padding-right: 3px;
	padding-bottom: 0px;
	padding-left: 3px;
}
 
.input {
	height: 18px;
	margin-top: 0px;
	margin-right: 3px;
	margin-bottom: 0px;
	margin-left: 3px;
	background-repeat: repeat-x;
	background-position: bottom;
	padding-top: 0px;
	padding-right: 2px;
	padding-bottom: 0px;
	padding-left: 2px;
	line-height: 18px;
}
.textInfor {
	padding-left: 4px;
	color: #666;
}
 
 
.input.input_1{
	color: #666;
	border: 1px solid #87A6B6;
}
 
.input.input_2{
	color: #033;
	border: 1px solid #008080;
}
 
.RightResult {
	background-color: #D7FFFF;
	line-height: 27px;
	text-align: center;
	color: #039;
	font-weight: bold;
}
 
.ErrorResult {
	background-color: #FFE6E6;
	line-height: 27px;
	text-align: center;
	color: #C00;
	font-weight: bold;
	clear: both;
}
.sign {
	color: #F00;
}
</style>
</head>
<script type="text/javascript" src="http://www.aizhanzhe.com/Public/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
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);
	}
}

$(document).ready(function(e) {
	//=== 设置聚焦并使光标设置在文字最后
	$.fn.setCursorPosition = function(position){  
		if(this.lengh == 0) return this;  
		return $(this).setSelection(position, position);  
	}
	  
	$.fn.setSelection = function(selectionStart, selectionEnd) {  
		if(this.lengh == 0) return this;  
		input = this[0];  
	  
		if (input.createTextRange) {
			var range = input.createTextRange();  
			range.collapse(true); 
			range.moveEnd('character', selectionEnd);  
			range.moveStart('character', selectionStart);  
			range.select(); 
		} else if (input.setSelectionRange) {
			input.focus();
			input.setSelectionRange(selectionStart, selectionEnd);  
		}  
		return this;  
	}  
	  
	$.fn.focusEnd = function(){
		this.setCursorPosition(this.val().length);  
	}
	//------------- 输入框的鼠标事件 ----------------
	with($('input[type=text]')){
		focus(function(){
			$(this).removeClass('input_1');
			$(this).addClass('input_2');
		});
		blur(function(){
			$(this).removeClass('input_2');
			$(this).addClass('input_1');
		});
	}
});
</script>
 
<script type="text/javascript"> 
$(document).ready(function(e) {
	$('#DoSaveBT').click(function(){
	  with($('#PermissionURL')){
		if(val()==''){
		  F_resultShow('页面路径不能为空！','ErrorResult','body');
		  focus();
		  return false;
		}
		else{
		  F_resultShow('输入正确！','RightResult','body');
		}
	  }
	});
});
</script>
 
<body>
 
  <table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#5d7b96" bordercolordark="#FFFFFF">
    <tr>
      <td colspan="2"><h1>模块权限设置</h1></td>
    </tr>
    <tr bordercolor="#5d7b96" bordercolordark="#FFFFFF" class="EditTable1">
      <td class="Column">页面路径</td>
      <td><input name="PermissionURL" type="text" class="input input_1" id="PermissionURL" size="60" />
        <span class="sign">*</span></td>
    </tr>
    <tr bordercolor="#5d7b96" bordercolordark="#FFFFFF" class="EditTable1">
      <td class="Column">页面说明</td>
      <td><input name="URLExplain" type="text" class="input input_1" id="URLExplain" size="60" /></td>
    </tr>
    <tr bordercolor="#5d7b96" bordercolordark="#FFFFFF" class="EditTable1">
      <td colspan="2"><div align="center">
        <input name="DoSaveBT" type="button" class="bt" id="DoSaveBT" value="验证" />
      </div></td>
    </tr>
  </table>
  </body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

Ajax无刷新方式显示提示信息，不弹出alert窗口显示验证信息，比较传统的方式当然是使用了JavaScript的Alert弹出窗口函数，不过貌似现在它已经过时了，目前流行的功能一般是使用Js与Div相结合的层弹出方法，可无刷新弹出浮动框用于提示某项操作，简单方便。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行