版权声明：本文为博主原创文章，转载注明出处即可。 https://blog.csdn.net/SherlockHolmes_/article/details/83660807
数据验证思路：
当我们在网站进行注册时，一般有两个数据验证的过程，一个是在服务器端的验证，一个是在浏览器端的验证。浏览器端的验证一般是用来验证提交的信息是否符合注册的要求，即数据是否合法；服务器端的验证主要是验证该注册信息是否已经存在于服务器中，如果注册信息已存在，则返回信息提示已经注册过了，如果注册信息在服务器中不存在，则经注册信息写入服务器中，并返回注册成功的信息。
由于我们一般都是用form表单来传递信息，这就要求我们要在表单传递到服务器端PHP页面之前在JavaScript中验证，这就用到了form表单中的onSubmit事件，onSubmit事件类似于onClick事件，都是用来触发点击事件。不同的是onSubmit只能在表单上使用，提交白丹前会触发，onClick是按钮等控件使用，用来触发点击事件。
提交过程：
onSubmit：
1、用户点击按钮 ---->
2、触发onsubmit事件 ---->
4、onsubmit未处理或返回true ------>
5、提交表单.
onClick：
1、用户点击按钮 ---->
2、触发onclick事件 ---->
3、onclick返回true或未处理onclick ---->
4、提交表单.
onsubmit处理函数返回false，onclick函数返回false，都不会引起表单提交。
注意要点：
1、onsubmit="return subSheck();"，不能不写return，否则表单永远会提交；
2、当JavaScript代码在html页面时尽量将js代码放到最后；
3、var re 为定义的正则表达式；
4、只有当邮箱和密码都验证成功是才允许提交的PHP页面。
具体实现：
（下面以一个仿照Pixiv的注册页面实现）
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>立即注册|pixiv</title>
<script type="text/javascript" src="js/register.js"></script>
<link rel="stylesheet" type="text/css" href="css/register.css">
<link rel="icon" href="Pixiv.ico">
<script type="text/javascript" src="js/jq.js"></script>
</head>
<body>
<div class="box">
<h1>Pixiv</h1>
<h6 style="color:#757C80FF ">让创作变得更有乐趣</h6>
<h3 style="color:#757C80FF ">立即注册</h3>
<form name="form1" onSubmit="return subSheck();" action="register.php" method="post"><!--这里要注意onsubmit="return subSheck();"，不能掉了return，否则表单永远会提交。-->
<input type="text" name="email" id="email" placeholder="邮箱地址">
<span id="DZYXerror"></span>
<br />
<input type="password" name="password" id="password" placeholder="密码">
<span id="MMerror"></span>
<br />
<input type="submit" name="submit" value="继续" class="bun">
</form>
<div class="facebook">
<p>用其他账号开始</p>
<a href="#"><img src="Images/G+.png"></a>
<a href="#"><img src="Images/facebook.png"></a>
<a href="#"><img src="Images/weibo.png"></a>
</div>
</div>
<div class="box1">
<img src="Images/1.png" width="100%" id="test">
</div>
<div class="box3">
<a href="login.html">登录</a>
</div>
<footer class="footer">
<a href="#"><span>©pixiv</span></a>
<a href="#"><span>使用条款</span></a>
<a href="#"><span>帮助</span></a>
<div class="box5">
<div class="box4">
<a href="#">日本語</a>
<a href="#">English</a>
<a href="#">한국어</a>
<a href="#">繁體中文</a>
<a href="#">简体中文</a>
</div>
<a href="#" class="a1"><span>简体中文ⅴ</span></a>
</div>
</footer>
</body>
</html>CSS代码：
* {
margin: 0;
padding: 0;
}
/*设置表单input样式*/
input[type="text"],
[type="password"] {
box-sizing: border-box;
text-align: left;
font-size: 15px;
height: 2.5em;
border-radius: 4px;
border: 1px solid #DFEBF2;
-web-kit-appearance: none;
-moz-appearance: none;
display: inline-block;
padding: 0 1em;
text-decoration: none;
width: 100%;
color: #757575FF;
}
input[name="QZ"] {
box-sizing: border-box;
text-align: left;
font-size: 15px;
height: 2em;
border-radius: 4px;
border: 1px solid whiteb0;
-web-kit-appearance: none;
-moz-appearance: none;
display: inline-block;
padding: 0 1em;
text-decoration: none;
width: 80%;
}
input[type="submit"] {
box-sizing: border-box;
text-align: center;
font-size: 15px;
height: 3em;
border-radius: 4px;
-web-kit-appearance: none;
-moz-appearance: none;
display: inline-block;
padding: 0 1em;
text-decoration: none;
width: 100%;
color: white;
background-color: #25C6FFFF;
border: none;
}
/*隐藏滚动条*/
body::-webkit-scrollbar {
display: none;
}
.box {
width: 263px;
margin: 0 auto;
border: 2px solid white;
padding: 50px 50px 0 50px;
color: #66ccff;
position: fixed;
top: 15%;
left: 38%;
background: #EEEFF0FF;
border-radius: 10px;
}
.box h1 {
font-size: 40px;
}
.box h6,
h3 {
margin-bottom: 20px;
}
.facebook p {
font-size: 10px;
text-align: center;
color: #666666FF;
margin-bottom: 20px;
}
.facebook {
background-color: #FFFFFFFF;
width: 100%;
height: 80px;
border: 1px solid #DFEBF2;
margin: 40px 0;
padding: 20px 0;
}
.facebook a {
margin-left: 3px;
}
.box1 {
text-align: center;
}
.form1 {
/*height: 50px;*/
overflow: hidden;
width: 700px;
}
.a1 {
text-decoration: none;
color: white;
font-size: 30px;
}
.box h1,
h6,
h3 {
text-align: center;
}
.bun {
margin-top: 5px;
}
#a1 {
text-decoration: none;
margin-right: 7px;
border: 1px solid #A9A9A9FF;
width: 40px;
height: 21px;
font-size: 15px;
display: inline-block;
background-color: #ECECECFF;
color: black;
float: right;
}
.box3 a {
width: 72px;
height: 30px;
background-color: #6D7084;
color: white;
position: fixed;
top: 10px;
right: 10px;
text-decoration: none;
border-radius: 4px;
font-size: 12px;
text-align: center;
padding-top: 10px;
}
.footer {
background-color: #464A4DFF;
width: 100%;
height: 30px;
position: fixed;
bottom: 0px;
left: 0px;
}
.box4 {
width: 80px;
height: 150px;
background-color: #464A4DB6;
position: fixed;
bottom: 30px;
left: 185px;
display: none;
}
.box4 a {
text-decoration: none;
font-size: 10px;
color: white;
display: block;
padding: 0 10px;
}
.box4>a:hover {
background-color: #FFFFFF4A;
}
.box5:hover .box4 {
display: block;
}
.box5 {
width: 80px;
height: 30px;
text-decoration: none;
font-size: 10px;
margin: 0 15px;
color: #A3A5A6FF;
line-height: 30px;
display: inline-block;
position: absolute;
}
.box5>a {
font-size: 10px;
color: #A3A5A6FF;
}
.footer>a {
text-decoration: none;
font-size: 10px;
margin: 0 10px;
color: #A3A5A6FF;
line-height: 30px;
}JavaScript代码【重点】：
<script>
//禁止图片右键行为->jQuery实现
$('img').bind("contextmenu", function(e) { return false; })
//注册表单验证
function subSheck() {
if (email() == true && password() == true) {
return true;
} else {
return false;
}
}
//验证邮箱
function email() {
var re = /[a-zA-Z0-9]{1,10}@[a-zA-Z0-9]{1,5}\.[a-zA-Z0-9]{1,5}/;
var email = document.getElementById("email");
if (email.value == "") {
alert("请输入电子邮箱！");
return false;
} else if (re.test(email.value) == false) {
alert("请输入合法的邮件地址！");
return false;
} else {
return true;
}
}
//验证密码
function password() {
var re = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z]{6,}$/;
var password = document.getElementById("password");
if (password.value == "") {
alert("请输入密码！");
return false;
} else if (password.value.length < 6) {
alert("密码长度至少为6位！");
return false;
} else if (re.test(password.value) == false) {
alert("格式错误，必须包含英文大小写字母和数字！！");
return false;
} else {
return true;
}
}
</script>PHP验证代码：
<?php
echo "";
$servername="localhost";
$username="root";
$password="root";
$dbname="chaldea";
$mail=$_POST["email"];
$conn= new mysqli($servername,$username,$password,$dbname);
if (!$conn) {
die("连接失败：".mysqli_connect_error());
}
if ($_POST['submit']) {
$mail=$_POST["email"];
$password=$_POST["password"];
$sql="SELECT mail from master WHERE mail='$mail'";
$query=mysqli_query($conn,$sql);
$rows=mysqli_num_rows($query);
if ($rows>0) {//验证邮箱是否被注册过，如果注册过，则提示去登录
echo "<script>alert('邮箱地址已注册，前去登录！');location='javascript:history.back()';</script>";
}else{//注册成功则返回登录页面，并提示登录
$sql1="INSERT INTO master(mail,password)VALUES('$mail','$password')";
echo $sql1;
if ($conn->query($sql1)==TRUE) {
echo "<script>alert('注册成功，现在去登录！');location.href='login.html';</script>";
}else{
echo "Error:".$sql1."<br/>".$conn->error;
}
}
}
$conn->close();
?>结果验证：
验证邮箱：
验证密码：
PHP验证未通过：
PHP验证通过：
