PHP連線資料庫利用js驗證表單
阿新 • • 發佈：2018-12-22
1.register.php
<!doctype html> <html> <head> <meta charset="utf-8"> <title>註冊</title> <script> //使用者名稱的通過id function checkUserName() { //得到userName輸入框物件 var userName = document.getElementById("userName"); //得到提示框物件 var checkUserNameResult = document.getElementById("checkUserNameResult"); //判斷輸入框的內容是否為空 if(userName.value.trim().length==0){ //向提示框輸入內容 checkUserNameResult.innerHTML = "*使用者名稱不能為空*"; return focus(); }else{ checkUserNameResult.innerHTML = ""; } } //密碼的通過傳參 function checkPassword(obj){ var password = obj; var checkPasswordResult = document.getElementById("checkPasswordResult"); if(password.trim().length==0){ checkPasswordResult.innerHTML = "*密碼不能為空*"; obj.focus(); }else{ checkPasswordResult.innerHTML = ""; } } //郵箱不在HTML里加點選事件 // onload 事件會在頁面或影象載入完成後立即發生。 window.onload=function() { var email=document.getElementById("email"); email.onblur=function() { var checkEmailResult=document.getElementById("checkEmailResult"); if(email.value.trim().length==0) { checkEmailResult.innerHTML = "*郵箱不能為空*"; return focus(); } else { checkEmailResult.innerHTML = ""; } } } /*function checkEmail() { //得到userName輸入框物件 var email = document.getElementById("email").value; //得到提示框物件 var checkEmailResult = document.getElementById("checkEmailResult"); //判斷輸入框的內容是否為空 if(email.trim().length==0){ //向提示框輸入內容 checkEmailResult.innerHTML = "*使用者名稱不能為空*"; return focus(); }else{ checkEmailResult.innerHTML = ""; } } */ //整個表單提交驗證，驗證通過就給後臺處理頁面，不通過提示錯誤 function checkLoginForm() { var un = document.getElementById("userName"); var pw = document.getElementById("password"); var em = document.getElementById("email"); if(un.value == "" || pw.value == "" || em.value == "") { alert("使用者名稱或密碼或郵箱不能為空"); return false; } } </script> </head> <body> <form method="post" action="test.php" onsubmit="return checkLoginForm()"> 使用者名稱： <input type="text" name="userName" id="userName" onBlur="checkUserName();"> <span id="checkUserNameResult" style="color: red"></span> <br/> 密碼： <input type="password" name="password" id="password" onblur="checkPassword(this.value);"> <span id="checkPasswordResult" style="color: red"></span> <br/> 註冊郵箱：<input type="text" name="email" id="email" > <span id="checkEmailResult" style="color: red"></span> <br/> <br/> <input type="submit" value="註冊"> </form> </body> </html>
2.處理註冊頁面的後臺頁面test.php
<!doctype html> <html> <head> <meta charset="utf-8"> <title>註冊處理頁面</title> </head> <body> <?php //建立users2資料庫，account資料表，id，userName，password，email欄位 //1.建立連線 $conn=mysqli_connect('localhost','root','123','users2'); //2.檢測連線 if(!$conn) { die("connect defail:".mysqli_connect_error()); } else { echo "連線成功"; } //3.插入資料 //$sql="insert into account(id,userName,password,email) values(NULL,'xiaoming','123','123')";//注意：前面的資料庫欄位不需要用引號，否則出錯 //上面的sql是檢測程式碼 $userName=$_POST["userName"]; $password=$_POST["password"]; $email=$_POST["email"]; $sql="insert into account(id,userName,password,email) values(NULL,'$userName','$password','$email')"; $test=mysqli_query($conn,$sql); if($test) { echo "註冊成功"; //header("location:login.php"); } else { echo "插入失敗".$sql."<br/>".mysqli_error($conn); } ?> </body> </html>