php web中使用bootstrap及ajax實現用戶註冊驗證

最近自己用php及bootstrap做了一個留言板,中途遇到了怎麼用ajax動態地顯示錶單驗證信息的問題,自己花了一天時間終於搞明白了。

工具/原料

php基礎ajax技術
bootstrap框架

方法/步驟

模板顯示及數據通過ajax提交(register.php)

<!DOCTYPE html>

<html>

<head>

<title>用戶註冊</title>

<meta charset="utf8"/>

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="./component/bootstrap/css/bootstrap.min.css">

<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->

<script src="./component/bootstrap/js/jquery-1.10.2.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="./component/bootstrap/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="./public/css/register.css">

</head>

<script type="text/javascript">

<!-- 表單驗證 -->

$(document).ready(function(){

var user = $("#username");

var pwd  = $("#password");

var pre=/^[a-zA-Z]\w{5,19}/;

$("#registerbtn").click(function(){

if(user.val()=="" || pwd.val()==""){

alert("用戶名或密碼不能為空");

$("#username").focus();

return false;

}

if(!pre.test(user.val())){

$(".msg").html("<font color='red'>用戶名必須以英文字母開頭,至少6位,至多20位!</font>");

return false;

}

$.ajax({

type:"POST",url:"rghandle.php",

data:{username:$("#username").val(),password:$("#password").val()},

beforeSend:function(){$(".msg").html("正在登錄中...");},

success:function(data){

$(".msg").html(data);

}

});

});

});

</script>

<body>

<div class="regform">

<h1 align="center">我的留言板</h1>

<form class="form-horizontal" role="form">

<div class="form-group">

<label for="username" class="col-sm-2 control-label">用戶名:</label>

<div class="col-sm-10">

<input type="text" class="form-control" id="username" name="username" placeholder="請輸入用戶名:">

</div>

</div>

<div class="form-group">

<label for="password" class="col-sm-2 control-label">密&nbsp&nbsp&nbsp&nbsp碼:</label>

<div class="col-sm-10">

<input type="password" class="form-control" id="password" name="password" placeholder="請輸入密碼">

</div>

</div>

<div class="form-group">

<div class="col-sm-offset-2 col-sm-10">

<div class="checkbox">

<label>

<input type="checkbox"> 請記住我

</label>

</div>

</div>

</div>

<div class="form-group">

<div class="col-sm-offset-2 col-sm-10">

<button type="button" class="btn btn-default" id="registerbtn">註冊</button>

</div>

</div>

</form>

<div class="msg"></div>

</div>

</body>

</html>

數據驗證及數據返回

<?php

include_once("./config/mysqlconnect.php");

if($_POST){

$username =trim($_POST['username']);

$password =md5(trim($_POST['password']));

$sql = "select * from user where username ='". $username. "'";

$res = mysql_query($sql);

$num = mysql_num_rows($res);

if($num > 0){

echo "用戶名已存在";

return false;

}else{

$sql = "insert into user (username,password) values ('". $username."','". $password."')";

$res = mysql_query($sql);

$num = mysql_affected_rows();

if($num>0){

echo "註冊成功,歡迎". $username;

echo '<script language=javascript>window.location.href="login.php"</script>';

}

}

}

?>

注意事項

form標籤裡面不再使用action和method,因為使用了ajax技術。
記得引入bootstrap框架,表單也可以自己寫。
原作者:緣來你(yuanlaini1)

相關文章

  1. Kendo UI Web中顏色拾取器的使用

    顏色拾取器ColorPicker是Kendo UI Web中的用於顏色選擇的下拉組件,這個設計採用了一個友好的操作界面來替換一個HTML5 <input type="color&quo ...
  2. 如何在WEB中快速存取資料庫信息

    使用快速開發工具DORADO存取數據 工具/原料 DORADO hsql資料庫 方法/步驟 加載資料庫驅動 配置數據源 添加數據訪問控制項 添加數據展現控制項 定義展現樣式及風格 運行驗證存取結果 注意事 ...
  3. 如何在WEB中搭建購物車

    用WEB做購物網站,購物車的搭建是不可缺少的,下面來簡述一二 工具/原料 電腦軟體 購物車 方法/步驟 entity包下建立實體類訂單類Order,如圖所示: 在entity包下建立實體類訂單項類Or ...
  4. java web中mybatis之單獨使用

    在這裡,沒有複雜的步驟,只有你最需要的案例與講解! 工具/原料 eclipse mysql 方法/步驟 新建mysql資料庫連接,並且創建表 創建好資料庫後,建一個普通的web project,然後在 ...
  5. Java EE應用中的異步通信技術AJAX

    Java EE應用中的異步通信技術AJAX: 帳號驗證 二級菜單聯動 方法/步驟 編寫html頁面: <html> <head> <title>註冊用戶惟一性檢查& ...
  6. web中JSON前後端數據的解析

    後台轉換JSON數據類型,前台解析JSON數據等等例子總結 JSON對象: JSONObject obj =newJSONObject(); obj.put("result", 0 ...
  7. HTML5 工具Kendo UI Web中Grid網格控制項的使用

    Kendo UI Web中的Grid控制項不僅可以顯示數據,並對數據提供了豐富的支持,包括分頁.排序.分組.選擇等,同時還有著大量的配置選項.使用Kendo DataSource組件,可以綁定到本地的J ...
  8. 古劍奇譚WEB中系統免費元寶怎麼獲得

    古劍奇譚WEB提供了很多系統元寶贈送,那麼都有哪些方式可以獲得系統元寶呢 工具/原料 古劍奇譚WEB 方法/步驟 參加女媧密境副本擊殺BOSS,每擊殺一次可以送10個左右元寶.每天可擊殺24個. 下載 ...
  9. Kendo UI Web中AutoComplete自動提示功能解析

    HTML5 Web app開發工具Kendo UI Web中,AutoComplete提供了基於輸入文本的提示功能,同時也允許多值條目.通過AutoComplete顯示的提示可以來自本地的數組也可以是 ...
  10. web中如何從資料庫中調用圖片。

    web中從資料庫中調用圖片.首先準備資料庫access,和dremeweaver. 工具/原料 access資料庫 dremeweaver 方法/步驟 將圖片存入你站點下的某個特定文件夾下,以文件夾名 ...
  11. 在HTML5工具Kendo UI Web中如何添加圖表

    在本文中將以示例說明如何使用Kendo UI Web中的Kendo UI DataViz添加儀表和圖表.下面的示例將說明如何添加一個圖表到現有的頁面,具體的示例如下: 下面就是要為圖表聲明一個目標元素 ...
  12. Kendo UI Web中圖像瀏覽器的使用

    Kendo UI Web中的圖像瀏覽器在默認的情況下會打開一個簡單的對話框,如下圖所示,方便用戶鍵入或者是粘貼圖片的URL以及指定一個工具提示. 從KendoUIQ3 2012時,編輯器的組件就支持了 ...
  13. 在WEB中使用Shiro實現基礎驗證配置

    在WEB中使用Shiro實現基礎驗證配置 工具/原料 shiro eclipse 方法/步驟 如果要使用Shiro那麼關鍵的部分還是需要整合web的開發,所以針對於web的開發,shiro本身也是可以 ...
  14. 在web中使用shiro標籤支持與用法

    在web中使用shiro標籤支持 工具/原料 shiro eclipse 方法/步驟 現在已經完成了整體的路徑的配置,但是在一個正常的項目開發過程中之中,對於前台的JSP頁面可以使用的連結地址,實際上 ...
  15. 在SSM項目中引入Bootstrap支持

    在SSM項目中引入Bootstrap支持 工具/原料 bootstrap eclipse 方法/步驟 打開百度 搜尋bootstrap 打開bootstrap中文網 下載bootstrap 在web項 ...
  16. java web中異常的處理

    可以在當前處理器中直接處理異常的信息,是整個系統更加的友好 方法/步驟 @Controller 使用註解聲明控制器@RequestMapping("demo") 請求的地址在該ur ...
  17. 怎樣在HTML網頁中使用bootstrap框架

    很多小夥伴在用bootstrap美化HTML網頁的時候,發覺bootstrap用不了.那麼為啥用不了bootstrap框架呢?今天小編就來告訴大家在HTML中使用bootstrap的方法和經驗. 工具 ...
  18. CDN在WEB中起到的作用

    問:1.TTCDN是怎麼減輕源站伺服器壓力的? 答:TTCDN能處理整個網站頁面的70%-95%的內容訪問量,從而解決了網站的並發量,由此減輕了源伺服器的訪問壓力,也同時提升了網站的性能.可擴展性以及 ...
  19. Viewport在開發手機Web中的應用

    目前比較主流的移動設備系統包括 Android,IOS ,Symbian,BlackBerry 與Web OS.這些系統瀏覽器都是基於webkit核心,而webkit號稱是一款全功能的移動瀏覽器,支持 ...
  20. php獲取js中數據的方法 ajax

    js是依賴瀏覽器存在的解釋型腳本語言,與php交互方式主要有兩種,一種是表單,另一種就是異步的ajax,他們提交的數據的方法是一樣的,常用的是POST, GET 工具/原料 php, js 方法/步驟 ...