El caso imita el registro del buzón de NetEase 163, que principalmente se da cuenta de que al registrar el buzón, si el buzón actual ya está registrado, entonces no se puede registrar. Si el buzón actual se puede registrar, entonces el registro es exitoso y se agrega a la base de datos.
Entorno operativo phpnow
Código
.html
<body>
<div class="container">
<h1 class="tit">欢迎注册网易邮箱</h1>
<div class="item">
<label class="input-placeholder">邮箱地址</label>
<input type="text" class="username" name="username">
<div class="tip">6～18个字符，可使用字母、数字、下划线，需要以字母开头</div>
<div class="domain">@163.com</div>
<p class="success" id="success">恭喜，该邮件地址可以注册</p>
<p class="error" id="error">该邮箱地址不可注册</p>
</div>
<div class="item">
<label class="input-placeholder">密码</label>
<input type="text" class="" name="password">
<div class="tip">6～16个字符，区分大小写</div>
</div>
<div class="item">
<label class="input-placeholder">手机号码</label>
<input type="text" class="" name="phone">
<div class="tip">可通过该手机号找回密码</div>
</div>
<button class="btn" id="btn">立即注册</button>
</div>
<script src="js/ajax.js"></script>
<script>
var inputs = document.getElementsByTagName("input");
var successTip = document.getElementById("success");
var errorTip = document.getElementById("error");
var btn = document.getElementById("btn");
// 记录存储名称
var key = {
"username": "用户名",
"password": "密码",
"phone": "手机号码"
}
// 设置一个状态，用来判断当前的邮箱地址是否已经被注册了，如果被注册了，就不允许提交
var emailFlag = true;
for (var i = 0; i < inputs.length; i++) {
inputs[i].onfocus = function () {
// 当聚焦的时候让label消失
this.previousSibling.previousSibling.style.display = 'none';
// 当聚焦的时候让下面的提示文案显示
this.nextSibling.nextSibling.style.display = 'block';
// 强制让成功和失败的提示消失
if (this.name == 'username') {
errorTip.style.display = "none";
successTip.style.display = "none";
}
//console.log(this.nextSibling)
//console.log(this.previousSibling.previousSibling)
}
// 失去焦点
inputs[i].onblur = function () {
// 当失去焦点的时候，判断，如果有value值，就不让label显示，否则就显示label
if (!this.value) {
this.previousSibling.previousSibling.style.display = 'block';
}
// 当聚焦的时候让下面的提示文案隐藏
this.nextSibling.nextSibling.style.display = 'none';
// 如果是用户名则发送ajax请求去判断当前的用户是否已经被注册
if (this.name == 'username' && this.value) {
// 发送Ajax请求校验
validate(this.value)
}
}
}
// 发送请求提交数据
btn.onclick = function () {
// 第一步要先判断用户名是否可以使用，如果不可以抛出错误
if (!emailFlag) {
alert("当前名称被占用，请输入新的名称");
return;
}
//提交参数
var subObj = {};
// 判断所有的表单信息是否都填上了，如果没有就抛出错误提示
for (var i = 0; i < inputs.length; i++) {
if (!inputs[i].value) {
alert(key[inputs[i].name] + "，不能为空");
return;
} else {
// 表单信息赋值
subObj[inputs[i].name] = inputs[i].value
}
}
// 如果都没有被return就将所有的信息提交到数据库
add(subObj);
}
// 校验请求
function validate(value) {
ajax.get("email_info.php", {
"username": value
}, function (data) {
// 显示成功提示
if (data == "SUCCESS") {
successTip.style.display = "block";
// 邮箱的可提交状态为true
emailFlag = true;
} else if (data == "ERROR") {
//显示失败提示
errorTip.style.display = "block";
emailFlag = false;
}
})
}
// 发送请求
function add(json) {
console.log(json)
// 提交逻辑
ajax.post("add.php", json, function (data) {
if (data == "SUCCESS") {
alert("提交成功");
emailFlag = false
} else if (data == "ERROR") {
alert("提交失败")
}
})
}
</script>
</body>email_info.php
<?php
// 得到邮箱地址
$username = $_GET["username"];
// 链接数据库
$connect = mysql_connect("localhost","root",123456);
// 选择数据库
mysql_select_db("xiaobai");
// 设置字符集
mysql_query("SET NAMES UTF8");
// 查询SQL
$sql = "SELECT * FROM email_info WHERE username = '{$username}'";
// 执行SQL
$result = mysql_query($sql);
//返回查出来的结果数量
$num = mysql_num_rows($result);
// 当前的结果如果等于0就说明数据库没有重复的邮箱 注册的邮箱能够使用
if ($num == 0) {
echo "SUCCESS";
}else{
echo "ERROR";
}
?>
add.php
<?php
// 得到邮箱地址，密码和手机号
$username = $_POST["username"];
$password = $_POST["password"];
$phone = $_POST["phone"];
$connect = mysql_connect("localhost","root",123456);
mysql_select_db("xiaobai");
mysql_query("SET NAMES UTF8");
//$sql = "SELECT * FROM email_info WHERE username = '{$username}'";
// 插入SQL
$sql = "INSERT INTO email_info (username,password,phone) VALUES('{$username}','{$password}','{$phone}')";
$result = mysql_query($sql);
// 如果$result返回1了，就说明提交成功了
if($result == 1){
echo "SUCCESS";
}else {
echo "ERROR";
}
?>
base de datos
Imagen de efecto
