HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单注册</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
ul {
margin: 0;
padding: 50px;
list-style: none;
}
.register {
width: 800px;
margin: 50px auto;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
}
li {
display: flex;
margin: 20px 0;
}
label,
input {
display: block;
float: left;
height: 46px;
font-size: 24px;
box-sizing: border-box;
color: #333;
}
label {
width: 200px;
line-height: 46px;
margin-right: 30px;
text-align: right;
}
input {
width: 320px;
padding: 8px;
line-height: 1;
outline: none;
position: relative;
}
input.code {
width: 120px;
}
input.verify {
width: 190px;
margin-left: 10px;
}
input.disabled {
background-color: #CCC !important;
}
input[type=button] {
border: none;
color: #FFF;
background-color: #E64145;
border-radius: 4px;
cursor: pointer;
}
.tips {
position: fixed;
top: 0;
width: 100%;
height: 40px;
text-align: center;
}
.tips p {
min-width: 300px;
max-width: 400px;
line-height: 40px;
margin: 0 auto;
color: #FFF;
display: none;
background-color: #C91623;
}
</style>
</head>
<body>
<div class="register">
<form id="ajaxForm">
<ul>
<li>
<label for="">用户名</label>
<input type="text" name="name" class="name">
</li>
<li>
<label for="">请设置密码</label>
<input type="password" name="pass" class="pass">
</li>
<li>
<label for="">请确认密码</label>
<input type="password" name="repass" class="repass">
</li>
<li>
<label for="">验证手机</label>
<input type="text" name="mobile" class="mobile">
</li>
<li>
<label for="">短信验证码</label>
<input type="text" name="code" class="code">
<input type="button" value="获取验证码" class="verify">
</li>
<li>
<label for=""></label>
<input type="button" class="submit" value="立即注册">
</li>
</ul>
</form>
</div>
<!-- 提示信息 -->
<div class="tips">
<p>用户名不能为空</p>
</div>
</body>
</html>
<script type="text/javascript" src='../js/jquery.min.js'></script>
<script type="text/javascript">
$(function(){
//逻辑1:验证用户名是否为空
//1.用户名文本框失去焦点时发送ajax请求 2.根据服务器返回的值确定是否可以使用该用户名
$(".name").blur(function(){
var value=$(this).val();
$.ajax({
url:'01.register_userName.php',
type:'post',
data:{name:value},
success:function(data){
if (data=='用户名已经被使用了,不好意思') {
$('.tips p').text(data).fadeIn(1000).delay(2000).fadeOut(1000);
}else{
$('.tips p').text(data).fadeIn(1000).delay(2000).fadeOut(1000);
}
}
})
})
//逻辑2:点击注册按钮,如果手机号为空,提示用户输入正确的值,并且阻止ajax请求
$(".verify").on('click',function(){
//获取手机号文本框的值
var phoneNum=$(".code").val();
//发送ajax
$.ajax({
url:'',
beforeSend:function(){
if(phoneNum==''){
$('.tips p').text('请正确输入手机号').fadeIn(1000).fadeOut(1000,function(){
$(".code").focus();
});
//阻止请求
return false;
}
},
success:function(data){
},
data:{num:phoneNum},
type:'post'
})
})
})
</script>
PHP
<?php
//准备一个数组用来保存多个用户名
$userArr=array("葫芦兄弟","柯南","水冰月","钢铁侠");
//获取提交过来的用户名
$postName=$_POST['name'];
//判断是否存在于数组中
$isIn=in_array($postName,$userArr);
if($isIn){
echo "用户名已经被使用了,不好意思";
}else{
echo "恭喜你,可以使用这个用户名";
}
?>