用户注册验证手机号码,邮箱合法性,并查询数据库账号是否注册

最新推荐文章于 2022-03-24 17:48:05 发布

天步

最新推荐文章于 2022-03-24 17:48:05 发布

阅读量5.3k

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/sn_qmzm521/article/details/53256836

版权

php 专栏收录该内容

67 篇文章 0 订阅

订阅专栏

<!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>
<title>注册验证</title>
<script type="text/javascript" src="jquery183.min.js"></script>
<style type="css/text">
label .error{
color: #900;
}
</style>
</head>
<body>
<div class="Logo-r">
<div class="Logo-info-r">
<a href="./" class="logo"></a>
<span class="findpw">欢迎注册</span>
</div>
</div>
<div class="blank"></div>
<div class="blank"></div>
<div class="w">
<div class="usBox">
<div class="usBox_2 clearfix">
<div class="f1 f5" align="center"></div>
</div>
</div>
<div class="w" id="regist">
<div class="mcon register_con">
<div id="reg-pic" class="box-pic box-pic1"></div>
<div id="login-box" class="uc_box uc_box_reg">

<ul class="register_tab">
<li id="li_register_type_email" class="tab_item cur fl" register_type="email">邮箱注册<span class="bg_ff"></span></li>
<li id="li_register_type_mobile" class="tab_item fl" register_type="mobile">手机注册<span class="bg_ff"></span></li>
</ul>

<form action="myindex.php" method="post" id="formUser" name="formUser" >
<div class="form">
<input type="hidden" name="zhucetype" id="zhucetype" value="email" />
<div class="item">
<input name="user_name" type="text" id="username" placeholder="输入邮箱" class="text email" useryanzheng=""/>
<i class="i-email"></i>
<div>
<span class="label" id="email_notice"></span>
</div>
</div>
<div id="o-password">
<div class="item" style="margin-bottom:30px;">
<input name="password" type="password" id="password" placeholder="请输入密码" οnkeyup="" class="text" />
<i class="i-pass"></i>
<div id="pwd_notice" style="display: none;">
<span class="label" id="password_notice" style="display:none;"></span>
</div>
<div id="pwd_intensity">
<span class="label" style="display:none;">
<table width="295" height="25px" border="0" cellspacing="0" cellpadding="0" style="padding: 0px 0px 10px;">
<tr align="center">
<td width="33%" id="pwd_lower"></td>
<td width="33%" id="pwd_middle"></td>
<td width="33%" id="pwd_high"></td>
</tr>
</table>
</span>
</div>
</div>
<div class="item">
<input type="password" id="conform_password" name="confirm_password" class="text" placeholder="请再次输入密码" οnblur="check_conform_password(this.value);" autocomplete="off" />
<i class="i-pass"></i>
<div>
<span class="label" id="conform_password_notice"></span>
</div>
</div>
</div>
<div class="item">
<input name="act" type="hidden" value="register">
<input type="hidden" name="back_act" value="user.php" />
<input type="submit" id="btn_submit" name="Submit" class="btn-img btn-regist" value="立即注册" />
</div>
</div>
</form>
</div>
</div>
</div>

<div class="blank"></div>
</div>
<script type="text/javascript">
$(function(){
//点击手机注册切换
$("#li_register_type_mobile").click(function(){
$(this).addClass("cur");
$("#username").val("");
$("#zhucetype").val("mobile");
$("#username").attr("placeholder","请输入手机号码");
$("#li_register_type_email").removeClass("cur");
});
//点击email注册切换
$("#li_register_type_email").click(function(){
$(this).addClass("cur");
$("#username").val("");
$("#zhucetype").val("email");
$("#username").attr("placeholder","请输入邮箱");
$("#li_register_type_mobile").removeClass("cur");
});
//验证用户名合法性和是否已注册
$("#username").change(function(){
//填写的用户名
$username = $(this).val();
//得到用户名input对象
var username = document.getElementById("username");
//得到注册类型
$zhucetype = $("#zhucetype").val();
//验证用户名合法性
if($zhucetype == "email"){
//此处验证邮箱合法性和数据库有没有
var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; //验证邮箱的正则表达式
if(!reg.test($username)){
alert("邮箱格式不对");
username.style.color="red";
$(this).attr("useryanzheng","err");
return false;
}else{
//邮箱正确，ajax验证是否注册
$.get("myindex.php",{username:$username},function(data){
if(data == "ok"){
username.style.color="green";
$(this).attr("useryanzheng","ok");
return true;
}else{
alert("对不起，此账户已经注册，请登录。");
username.style.color="red";
$(this).attr("useryanzheng","err");
return false;
}
});

}
}
if($zhucetype == "mobile"){
//此处验证邮箱合法性和数据库有没有
var shouji = /^1[3458]\d{9}$/;//验证手机的正则表达式
if(!shouji.test($username)){
alert("手机格式不对");
username.style.color="red";
$(this).attr("useryanzheng","err");
return false;
}else{
//手机正确，ajax验证是否注册
$.get("myindex.php",{username:$username},function(data){
if(data == "ok"){
username.style.color="green";
$(this).attr("useryanzheng","ok");
return true;
}else{
alert("对不起，此账户已经注册，请登录。");
username.style.color="red";
$(this).attr("useryanzheng","err");
return false;
}
});
}
}
});
})
</script>
</body>
</html>