jQuery+Ajax+PHP+mysql实现无刷新注册/登陆(用户名邮箱验证码等)

标签: jquery  mysql  ajax  php  jquery ajax

register.html
<!DOCTYPE html>
<html>
<head>
<title>用ajax做登陆页面</title>
<meta charset='utf-8'>
<link rel='stylesheet' href='layout.css'>
</head>
<body>
<div class="wraper">
<div id='login'>
<ul>
<li><input type='text' name='username' id='username' placeholder='用户名'><span id='user'></span></li>
<li><input type='password' name='password' id='password' placeholder='密码'><span id='passw'></span></li>
<li><input type='password' name='repassword' id='repassword' placeholder='密码'><span id='repassw'></span></li>
<li><input type='text' name='email' id='email' placeholder='邮箱'><span id='mail'></span></li>
<li><input type="text" name="validate" id="validate" size=10 placeholder='验证码'><span id='code'></span> 
</br><img  title="点击刷新" src="./captcha.php" align="absbottom" onclick="this.src='captcha.php?'+Math.random();"></img></li>
<li><button type='submit' id='register_submit'>提交</button></li>
</ul>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script src='ajax.js'></script>
</body>
</html>

register.php
<?php
session_start();
session_destroy();
$username = isset($_POST["user"]) ? $_POST["user"] : $_GET["user"];
$password = isset($_POST["passw"]) ? $_POST["passw"] : $_GET["passw"];
$email = isset($_POST["email"]) ? $_POST["email"] : $_GET["email"];
$code = isset($_POST["code"]) ? $_POST["code"] : $_GET["code"];
// 第一步,连接数据库  
    $conn = mysqli_connect('localhost','root','') or die('数据库连接失败,错误信息:'.mysqli_error());   
    // 第二步,选择指定的数据库,设置字符集  
    mysqli_select_db($conn,'ajaxjq1') or die('数据库错误11,错误信息:'.mysqli_error());  
    mysqli_query($conn,'SET NAMES UTF8') or die('字符集设置错误:'.mysqli_error());  
      // 显示已存在数据 
     $sql1="SELECT * FROM user where username='$username'";//查询用户名
	 $sql2="SELECT * FROM user where email='$email'"; //查询邮箱
	 $result1=mysqli_query($conn,$sql1);
/* 	 var_dump($result1); */
	 $num1=mysqli_num_rows($result1);
	 $result2=mysqli_query($conn,$sql2);
/* 	  var_dump($result2); */
	  $num2=mysqli_num_rows($result2);
if($num1>0){
echo '0';
exit;
}else if($num2>0){
echo '1';	
exit;	
}else if(strtoupper($_SESSION['authnum_session'])!=strtoupper($code)){
 echo '2';
}else{
 $sql = "insert into user(username,password,email) values('$username','$password','$email')";
 $result=mysqli_query($conn,$sql);	
 echo '3';
}
?>

ajax.js

$(document).ready(function(){
$('#username').blur(function(){//blur 事件会在对象失去焦点时发生。
	if($(this).val()==''){  //var $user=$('#username').val();
	$('#user').text('用户名不能为空');
    $('#username').focus();	
	return false;
	}else if(($(this).val().length)<3){
	$('#user').text('用户名长度不能少于3个字符');
    $('#username').focus();		
	return false;		
	}else if(!($(this).val().match(/^[\u4E00-\u9FA5a-zA-Z0-9_]{0,}$/))){
	$('#user').text('用户名只允许汉字、英文字母、数字、下划线!');
    $('#username').focus();		
	return false;	   
   }		
});
$('#password').blur(function(){
	if($(this).val()==''){
	$('#passw').text('密码不能为空');	
	$('#password').focus();
	return false;
	}else if(($(this).val().length)<6){
	$('#passw').text('密码不能少于6个字符');	
	return false;		
	}else if(!($(this).val().match(/^[\u4E00-\u9FA5a-zA-Z0-9_]{0,}$/))){
	$('#passw').text('密码只允许汉字、英文字母、数字、下划线!');
  	$('#password').focus();	
	return false;	   
   }		
});
$('#repassword').blur(function(){
   if($('#password').val()!=($(this).val())){//确认密码
	$('#repassw').text('密码不一致!');	
	$('#repassword').focus();
	return false;  
   }	
});
$('#email').blur(function(){
   if($(this).val()==''){
	$('#mail').text('邮箱不能为空');
    $('#email').focus();	
	return false;
   }else if(!($(this).val().match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/))){
	$('#mail').text('请输入正确的邮箱格式!');
    $('#email').focus();		
	return false;	   
   }	
});
$('#validate').blur(function(){
	if($(this).val()==''){
    $('#code').text('验证码不能为空!');
    $('#validate').focus();
	return false;
   }
});  	
	
//注册

$('#register_submit').click(function(){
   var $user=$('#username').val();
   var $passw=$('#password').val();
   var $repassw=$('#repassword').val();
   var $email=$('#email').val();
   var $validate=$('#validate').val();
		$.ajax({
		type:'POST',
		dataType: 'json',
		url:'register.php',
		data:{
			'user':$user,
			'passw':$passw,
			'email':$email,
			'code':$validate
		},
		success:function(msg){
         if(msg == "0"){
			$('#user').text('用户名已存在');
			$('#username').focus();			
			}else if(msg == "1"){
				$('#user').text('用户名可以使用');		
				$('#mail').text('邮箱已存在');	
				$('#email').focus();	
			}else if(msg == "2"){
				$('#user').text('');		
				$('#mail').text('');	
				$('#code').text('验证码错误');
				$('#validate').focus();
			}else if(msg == "3"){
				  $('#user').text('');
				  $('#passw').text('');	
				  $('#repassw').text('');	
				  $('#mail').text('');
				  alert('注册成功');		
			}
		}
		});
});	
//注册

});

已上传 https://download.csdn.net/download/qq_41970881/10370223
 
版权声明:本文为qq_41970881原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41970881/article/details/80062477