ajax实例之用户名即时验证

这个实例功能虽然不复杂，但是是一个综合型的实例，用到的很多方面的知识(html,css,js,ajax,PHP,MysqL,json)，很值得初学者实践一下。

先上几张效果图：

图一

图二

图三

图四

下面是代码，所有代码都在同一个文件中，注释没怎么写了。

<?PHP
	if(isset($_GET['id'])){//当有用户名提交时
		$username=trim($_GET['id']);
		$result=array();
		if(!preg_match('/^[a-z][a-z0-9]{3,19}$/i',$username)){
			$result['status']=0;
			$result['text']='用户名 '.$username.' 格式不正确';
			die(json_encode($result));
		}
		//连接数据库
		MysqL_connect("localhost",'root','8888'); 
		MysqL_select_db('test'); 
		$sql="select username from users where username='$username'"; 
		$query=MysqL_query($sql); 
		if(MysqL_num_rows($query)>0){ 
		 	$result['status']=0;
			$result['text']='用户名 '.$username.' 已存在';
		}else{ 
			$result['status']=1;
			$result['text']='用户名 '.$username.' 可用';
		} 
		
		echo json_encode($result);
		die();
	}
?>


<!DOCTYPE html> 
<head> 
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Ajax实例之用户名即时检测</title> 
<style type="text/css">
body{background-color:#fff;}
p{font-size:20px;font-family:微软雅黑;}
form{font-size:14px;}
input{padding:4px;border:1px solid #dfdfdf;outline:none;border-radius:5px;}
span.info{font-size:12px;color:gray;}
span.ok{font-size:12px;color:green;}
span.bad{font-size:12px;color:red;}
</style>
<script type="text/javascript">

var ajax=null;  

function createajax(){ //创建ajax对象
	if(window.ActiveXObject){ 
		ajax=new ActiveXObject('Microsoft.XMLHTTP');
	}else if(window.XMLHttpRequest){
		ajax=new XMLHttpRequest(); 
	} 
} 

function checkname(){ //失去焦点时调用，检测用户名是否存在
	var username=document.myform.username.value;
	var tip=document.getElementById('tip');
	if(username==""){
		tip.className='bad';
		tip.innerHTML='用户名不能为空';
		return;
	}
	if(null==ajax) 
		createajax(); 
	ajax.open("GET","?id="+username,true);
	ajax.onreadystatechange=change_tip;
	ajax.send(null); 
} 

function change_tip(){ //状态改变时调用
	if(ajax.readyState == 4){
		if(ajax.status == 200){ 
			eval("var obj="+ajax.responseText);
			if(obj.status===1){
				tip.className='ok';
				tip.innerHTML=obj.text;
			}else{
				tip.className='bad';
				tip.innerHTML=obj.text;
			}
		} 
	} 
} 

function show_tip(){//获得焦点时调用，提示用户输入规则
	var tip=document.getElementById('tip');
	tip.className='info';
	tip.innerHTML="用户名,4-20位字母或数字,非数字开头";
}
</script> 
</head> 
<body> 
<p>ajax用户名检测<p><hr>
<form name="myform"> 
用户名 <input type="text" name="username" onblur="checkname();" onfocus="show_tip()"> 
<span id="tip" class="info">用户名,非数字开头</span> 
</form> 
</body> 
</html>

原文链接：https://www.f2er.com/ajax/166731.html

ajax实例之用户名即时验证

猜你在找的Ajax相关文章