『PHP学习笔记』系列九：利用from表单的onSubmit事件进行浏览器端的数据验证

数据验证思路：

当我们在网站进行注册时，一般有两个数据验证的过程，一个是在服务器端的验证，一个是在浏览器端的验证。浏览器端的验证一般是用来验证提交的信息是否符合注册的要求，即数据是否合法；服务器端的验证主要是验证该注册信息是否已经存在于服务器中，如果注册信息已存在，则返回信息提示已经注册过了，如果注册信息在服务器中不存在，则经注册信息写入服务器中，并返回注册成功的信息。

由于我们一般都是用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、οnsubmit="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验证通过：