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

2024-09-05 12:18:24

字体：大中小

来源：转载

供稿：网友

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

<!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="/ajaxjs/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>

上一篇：jQuery进度条，点击改变进度显示

下一篇：Js检测是否是360浏览器