AJAX实现用户注册检验
疯子的紫梦
posted @ 2009年5月18日 01:54
in mysql
, 1547 阅读
reg.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=utf-8" />
<title>This Is K-Make</title>
<style type="text/css">
body{
font-size:12px;
text-align:center;
}
.text{
width:180px;
height:12px;
}
p{
width:600px;
height:20px;
line-height:20px;
text-align:left;
}
p label{
display:block;
width:80px;
height:20px;
line-height:20px;
float:left;
text-align:right;
}
p span{
margin-left:10px;
}
</style>
</head>
<body>
<script language="javascript">
function CreateXmlHttpRequest(){
var xmlHttp;
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
function CheckName(){
var name = document.getElementById('name'); //获取用户名文本框
var span = document.getElementById('name_info'); //获取用于显示结果的span标记
if(name.value.length <= 4){
span.style.color = '#ff0000'; //设置span标记内的字体颜色为红色
span.innerHTML = '用户名长度不能少于4个字符！'; //span标记内容
return false;
}
var xmlHttp = CreateXmlHttpRequest();//创建异步请求对象
var time = new Date().getTime();
var url = 'reg.php?act=reg&name=' + name.value.toLowerCase() + '&tmp=' + time;//构造出请求地址
xmlHttp.open("GET",url,true); //建立一个异步请求
/*这里我们使用GET方式请求
POST方式的请求基本差不多，朋友们自己试试如果不行，在下面给我留言*/
xmlHttp.onreadystatechange = function(){ //监视请求状态
span.style.color = '#ff9900';
span.innerHTML = '查询中，请稍候！';
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
if(xmlHttp.ResponseText.indexOf('no') != -1){ //如果服务器返回的信息中有no
span.style.color = '#ff0000'; //设置span标记颜色为红色
span.innerHTML = '用户名[' + name.value + ']已经被别的用户使用！';
}else{//如果返回信息中没有no
span.style.color = '#000000';//设置颜色为黑色
span.innerHTML = '用户名[' + name.value + ']可以使用！';
}
return true;
delete xmlHttp; //删除请求对象
}
}
xmlHttp.send(null); //发送请求
}
</script>
<form method="post" action="reg.php">
<p><label>用户名：</label><input type="text" class="text" id="name" name="user" onblur="CheckName()" /><span id="name_info"></span></p>
<p><label>密码：</label><input type="password" class="text" /></p>
<p><label> </label><input type="submit" value="注册" /></p>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>This Is K-Make</title>
<style type="text/css">
body{
font-size:12px;
text-align:center;
}
.text{
width:180px;
height:12px;
}
p{
width:600px;
height:20px;
line-height:20px;
text-align:left;
}
p label{
display:block;
width:80px;
height:20px;
line-height:20px;
float:left;
text-align:right;
}
p span{
margin-left:10px;
}
</style>
</head>
<body>
<script language="javascript">
function CreateXmlHttpRequest(){
var xmlHttp;
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
function CheckName(){
var name = document.getElementById('name'); //获取用户名文本框
var span = document.getElementById('name_info'); //获取用于显示结果的span标记
if(name.value.length <= 4){
span.style.color = '#ff0000'; //设置span标记内的字体颜色为红色
span.innerHTML = '用户名长度不能少于4个字符！'; //span标记内容
return false;
}
var xmlHttp = CreateXmlHttpRequest();//创建异步请求对象
var time = new Date().getTime();
var url = 'reg.php?act=reg&name=' + name.value.toLowerCase() + '&tmp=' + time;//构造出请求地址
xmlHttp.open("GET",url,true); //建立一个异步请求
/*这里我们使用GET方式请求
POST方式的请求基本差不多，朋友们自己试试如果不行，在下面给我留言*/
xmlHttp.onreadystatechange = function(){ //监视请求状态
span.style.color = '#ff9900';
span.innerHTML = '查询中，请稍候！';
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
if(xmlHttp.ResponseText.indexOf('no') != -1){ //如果服务器返回的信息中有no
span.style.color = '#ff0000'; //设置span标记颜色为红色
span.innerHTML = '用户名[' + name.value + ']已经被别的用户使用！';
}else{//如果返回信息中没有no
span.style.color = '#000000';//设置颜色为黑色
span.innerHTML = '用户名[' + name.value + ']可以使用！';
}
return true;
delete xmlHttp; //删除请求对象
}
}
xmlHttp.send(null); //发送请求
}
</script>
<form method="post" action="reg.php">
<p><label>用户名：</label><input type="text" class="text" id="name" name="user" onblur="CheckName()" /><span id="name_info"></span></p>
<p><label>密码：</label><input type="password" class="text" /></p>
<p><label> </label><input type="submit" value="注册" /></p>
</form>
</body>
</html>
reg.php 页面
if( $_GET['act'] == 'reg')
{
include("mysql_class.php");
$user=$_GET[name];
$sql = "SELECT `user` FROM `guest` WHERE `user` ='$user'";
$query=$db->query($sql);
$result=$db->fetch_row($query);
if($result!='')
{
echo "no";
}
else
{
echo "yes";
}
}
{
include("mysql_class.php");
$user=$_GET[name];
$sql = "SELECT `user` FROM `guest` WHERE `user` ='$user'";
$query=$db->query($sql);
$result=$db->fetch_row($query);
if($result!='')
{
echo "no";
}
else
{
echo "yes";
}
}
2024年1月12日 17:31
The primary idea or goal of this website has been to offer resources that contain comprehensive information on every subject and are accessible via the Internet. making certain that each and every reader finds the most relevant and pavzi.com worthwhile information regarding the subject they are searching for and linking to our content.Because our website is multi-niche or multi-category, it will guarantee that it offers resources and information on every subject. Our website features a number of timeless topics, including career, job recruitment, education, technology, and reviews, among others. Indeed, Tech, Finance, and Product Reviews are our primary focus.