javascript驗證前端頁面
阿新 • • 發佈：2017-08-09
sam sel title lena 返回 content word 表單提交 isset
1.html頁面
<!DOCTYPE html> <html> <head> <title>註冊</title> <meta charset="UTF-8" /> <!-- js驗證 --> <script type="text/javascript">
function validate_required(filed, alerttxt) {with(filed) { if (value == null || value == "") { alert(alerttxt); return false; } else { return true; } } } function validate_form(thisform) {with(thisform) { if (validate_required(username, "用戶名不能為空") == false) { username.focus(); return false; } if (validate_required(pass1, "密碼不能為空") == false) { username.focus();return false; } if (validate_required(pass2, "確認密碼不能為空") == false) { username.focus(); return false; } if (pass1.value != pass2.value) { alert("兩次密碼不一致"); return false; } } } </script> </head> <!-- onSubmit="return validate(this)"這句，是一個驗證表單的功能。當validate()這個函數返回值是true的時候，表單提交，反之則不提交。 --> <body> <form onsubmit="return validate_form(this) " action="jstest.php" method="post"> <div class="1"> <div class="1.1"> <div> <label>用戶名</label> </div> <div> <input type="text" placeholder="請輸入用戶名號" name="username"> </div> </div> <div class="1.2"> <div> <label>密碼</label> </div> <div> <input type="password" value="" name="pass1"> </div> </div> <div class="1.3"> <div> <label>確認密碼</label> </div> <div> <input type="password" value="" placeholder="" name="pass2"> </div> </div> </div> <div class="2"> <input type="submit" name="sub" id="sub" value="註冊" /> </div> </form> </body> </html>
2.php頁面
jstest.php
<?php require ("mysql_class.php");//引入數據庫處理文件 $db = new Mysql("localhost", "root", "201122", "userdb"); if (isset($_POST["sub"])) { //獲取表單數據 $username = $_POST["username"]; $pass1 = $_POST["pass1"]; $pass2 = $_POST["pass2"]; define("TABLENAME", "user_zhuce"); define("SEL", "where username=‘$username‘"); define("COLE", "(username,password,password2)"); define("DATEE", "(‘$username‘,‘$pass1‘,‘$pass2‘)"); //信息是否為空 $db -> isnull($username, $pass1, $pass2); //密碼是否一致 $db -> issame($pass1, $pass2); if ($pass1 == $pass2) { //查詢是否有相同的用戶名 $sel = $db -> select(TABLENAME, SEL); $row = $db -> row($sel); $r = $row[0]; if ($r == 1) { echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.alert" . "(" . "\"" . "該用戶名已被註冊" . "\"" . ")" . ";" . "</script>"; echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.location=" . "\"" . "index.html" . "\"" . "</script>"; exit ; } //插入用戶信息 $insert = $db -> insert(TABLENAME, COLE, DATEE); $sel = $db -> select(TABLENAME, SEL); $row = $db -> row($sel); $r = $row[0]; if ($r == 1) { echo "註冊成功"; } $db -> dbClose(); } } ?>
3.數據庫處理頁面
mysql_class.php
<?php header("content-type:text/html;charset=utf-8"); class Mysql { private $host; //服務器地址 private $root; //用戶名 private $password; //密碼 private $database; //數據庫名 //通過構造函數初始化類 function Mysql($host, $root, $password, $database) { $this -> host = $host; $this -> root = $root; $this -> password = $password; $this -> database = $database; $this -> connect(); } function connect() { $this -> conn = mysql_connect($this -> host, $this -> root, $this -> password); // if($this->conn){ // echo "連接mysql成功"; // }else{ // echo "連接mysql失敗"; // } // $this->conn= mysql_select_db($this -> database, $this -> conn); // if($this->conn){ // echo "連接db成功"; // }else{ // echo "連接db失敗"; // } mysql_query("set names utf8"); } function dbClose() { mysql_close($this -> conn); } function query($sql) { return mysql_query($sql); } function row($result) { return mysql_fetch_row($result); } function select($tableName, $condition) { return $this -> query("SELECT COUNT(*) FROM $tableName $condition"); } function insert($tableName, $fields, $value) { $this -> query("INSERT INTO $tableName $fields VALUES$value"); } function isnull($input1,$input2,$input3){ if($input1==""||$input2==""||$input3==""){ echo"<script type="."\""."text/javascript"."\"".">"."window.alert"."("."\""."請填寫完整（php）！"."\"".")".";"."</script>"; } } function issame($password1,$password2){ if($password1!=$password2){ echo"<script type="."\""."text/javascript"."\"".">"."window.alert"."("."\""."兩次密碼不一致！(php)"."\"".")".";"."</script>"; } } } ?>
javascript驗證前端頁面