案例模仿的网易163邮箱注册,主要实现 当注册邮箱的时候,如果当前邮箱已注册那么无法注册,如果当前邮箱可以注册,那么注册成功并添加到数据库中
运行环境 phpnow
上代码吧
.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";
}
?>
数据库
效果图