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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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="//apps.bdimg.com/libs/jquery/1.11.3/jquery.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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

网站常用

描述

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