『PHP學習筆記』系列九：利用from表單的onSubmit事件進行瀏覽器端的資料驗證
阿新 • • 發佈：2018-11-17
資料驗證思路：
當我們在網站進行註冊時，一般有兩個資料驗證的過程，一個是在伺服器端的驗證，一個是在瀏覽器端的驗證。瀏覽器端的驗證一般是用來驗證提交的資訊是否符合註冊的要求，即資料是否合法；伺服器端的驗證主要是驗證該註冊資訊是否已經存在於伺服器中，如果註冊資訊已存在，則返回資訊提示已經註冊過了，如果註冊資訊在伺服器中不存在，則經註冊資訊寫入伺服器中，並返回註冊成功的資訊。
由於我們一般都是用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驗證通過：
