使用mvc4可以很快速的創建頁面，但封裝的過多，難免會有些性能上的問題。所以基於此，通過使用簡單的手寫html，加ajax，json來創建一個注冊頁面，會比較干凈，簡潔。
本項目的環境是MVC4+EF5.0+JQuery1.8.2+VS2013
先上下效果圖：
創建這么一個注冊頁面，分以下幾個步驟
1、創建頁面html
2、js對用戶輸入數據的驗證
3、json+ajax get數據 驗證用戶名
4、json+ajax post數據 提交用戶注冊信息
5、css3美化頁面
下面就開始把實現的具體過程加以描述：
1、創建頁面html
添加一個視圖，命名Index.cshtml，將以下html代碼粘貼進入：
<body> <div id="background"> <h1 id="logo">flowbywind</h1> <div id="content"> <h2>注冊</h2> <fieldset> <label for="userName">用戶名</label><span class="required">*</span> <input name="userName" type="text" id="userName"/> </fieldset> <fieldset> <label for="userPwd">密碼</label><span class="required">*</span> <input name="userPwd" type="password" id="userPwd"/> </fieldset> <fieldset> <label for="userPwd2">確認密碼</label><span class="required">*</span> <input name="userPwd2" type="password" id="userPwd2" /> </fieldset> <fieldset> <label for="郵箱">郵箱</label><span class="required">*</span> <input name="userEmail" type="text" id="userEmail"/> </fieldset> <fieldset class="nolabel"> <input type="button" id="register" value="注冊" /> </fieldset> </div> </div> </body>
2、js對用戶輸入數據的驗證
用戶輸入數據的驗證主要集中在用戶名是否已經存在，密碼和驗證密碼是否相同，郵箱的格式是否符合規則
首先我們建立一個工具類util.js ，里面主要用來驗證數據是否為空，郵箱格式，顯示錯誤警告和取消顯示警告等公共方法
如這里判斷控件數據是否為空的方法：
//判斷輸入控件的值是否為空 //這里的e參數 如果不傳值得話，默認是事件對象，通過這個事件對象，可以獲得觸發事件的對象 function fieldIsFilled(e) { var me = getActiveObject(e); //獲取觸發事件的對象 if (me.value == "") { //display an error warn(me, "required"); } else { //cancle display error unwarn(me, "required"); } }
上述方法中的getActiveObject函數， 主要是為了考慮瀏覽器的兼容性，方法如下：
///獲得觸發事件的對象 ///用來處理多個事件處理程序中IE不支持this為觸發事件的對象 function getActiveObject(e) { var obj; if (!e) // 較早版本的IE 不會發送這樣一個對象 只能通過window.event屬性獲得事件對象 { obj = window.event.srcElement; } else if (e.srcElement) //IE 7 或者之后的版本 { obj = e.srcElement; } else { obj = e.target; //支持DOM Level 2 瀏覽器（chrome 火狐 opera） 通過所傳入事件的target屬性提供當前對象 } return obj; }
上述方法中有個warn和unwarn 兩個方法，這兩個方法分別用來控制顯示錯誤警告和取消顯示警告的作用。
其中warn代碼如下：
支持動態的添加錯誤內容到html頁面，即如果出現用戶輸入數據不合法，則新增p元素，由p元素顯示錯誤內容，相反unwarn方法，就是將p元素移除html頁面。
//顯示用戶輸入數據的不合法原因 field 控件對象 warningType是在userRegister.js中的required、IsExist等 function warn(field, waringType) { var parentNode = field.parentNode; //獲取當前對象的父節點 //用eval計算json數據的值（如warnings.userName.required在userRegister.js中指示為用戶名不得為空）取得錯誤提示內容 var warning = eval("warnings." + field.id + "." + waringType); //判斷父節點下面的p元素是否存在，p元素是用來顯示錯誤的，如果不存在，則生成p元素到該父節點下。 if (parentNode.getElementsByTagName("p").length == 0) { var p = document.createElement("p"); field.parentNode.appendChild(p); var warningNode = document.createTextNode(warning); p.appendChild(warningNode); } //如果p已經存在，則更新當前錯誤內容 else { var p = parentNode.getElementsByTagName("p")[0]; p.childNodes[0].nodeValue = warning; //p的childNodes[0]代表p的第一個子節點即文本節點，文本節點的nodeValue即為文本值 } }
在這里warning是聲明的全局變量 也是一段json數據，存儲的是各個控件的數據限制內容：
var warnings = { "userName": { "required": "用戶名不得為空", "IsExist":"用戶名已經存在，請重新輸入" }, "userPwd2": { "required": "密碼不得為空", "isEqual": "兩次密碼必須輸入相同" }, "userPwd": { "required": "密碼不得為空", }, "userEmail": { "required": "郵箱不得為空", "format":"郵箱格式不正確，示例：'name@domain.com'" },
"register": ""
}
為了能達到實時響應用戶輸入數據是否合法，在頁面初始化時綁定監聽事件，在用戶輸入完畢后觸發數據的校驗：
window.onload = initPage; //初始化頁面時，給控件綁定事件，這里用到了多個事件處理程序，即控件一次會執行多個事件 function initPage(){ //addEventHandler是監聽事件 根據瀏覽器選擇性調用addEventListener(使用chrome 火狐等)或attachEvent（適用IE）方法 addEventHandler(document.getElementById("userName"), "blur", fieldIsFilled); //多事件處理程序 addEventHandler(document.getElementById("userName"), "blur", checkUserName); addEventHandler(document.getElementById("userPwd"), "blur", fieldIsFilled); addEventHandler(document.getElementById("userPwd2"), "blur", fieldIsFilled); addEventHandler(document.getElementById("userPwd2"), "blur", checkPwdEqual); addEventHandler(document.getElementById("userEmail"), "blur", emailIsProper); addEventHandler(document.getElementById("userEmail"), "blur", fieldIsFilled); document.getElementById("register").onclick = submitData; };
3、json+ajax get數據 驗證用戶名
下面講一下用json+ajax get數據，來驗證用戶名的，即驗證用戶輸入的名稱是否已經被注冊了。
//檢測用戶名是否重復 function checkUserName() { jQuery.ajax({ url: "register/validateUser", type: "GET", data: { "userName": $("#userName").val() }, contentType: "application/x-www-form-urlencoded", success: function (data) { if (data == "false") { warn(document.getElementById("userName"), "IsExist"); } if (data == "ok") { unwarn(document.getElementById("userName"), "IsExist"); } }, error: function (xhr, error, ex) { var div = document.createElement("div"); div.innerText = "出現錯誤，請稍后再試，帶來不便，敬請諒解"; document.getElementsByTagName("body")[0].appendChild(div); } }); //使用jquery 的ajax發送 請求 }
相應的后台代碼為：
public string ValidateUser(string userName) { using(LoginDbContext db=new LoginDbContext()) { //如果當前用戶名 已經存在 返回false if (db.UserRegisters.Where(a=>a.UserName==userName ).Count()>0) { return "false"; } else { return "ok"; } } }
4、json+ajax post數據 提交用戶注冊信息
使用ajax+json 在mvc中post的數據，需要注意的幾點是：
1）修改contentType為"application/json"，發送數據使用JSON.stringfy(js實體對象);JSON.stringfy的作用是將對象格式化為json字符串，正好和JSON.parse相反，JSON.parse是將json字符串解析為對象。
js實體對象是根據實體屬性來構造的，如下：
function userRegisterModel() { var self = this; this.UserName = $("#userName").val(); this.UserPwd = $("#userPwd").val(); this.UserEmail = $("#userEmail").val(); }
接下來用ajax 提交數據，
var request = new userRegisterModel(); $.ajax( { url: "Register/Register", type: "POST", dataType: "json", data: JSON.stringify(request), contentType: "application/json", success: function (data) { if (data.result == "success") { warnings["register"]["register"] = data.content; warn(document.getElementById("register"), "register"); } if (data.result == "error") { warnings["register"]["register"] = data.content; warn(document.getElementById("register"), "register"); } } } );
相應的后台處理代碼為：
[HttpPost] public JsonResult Register(UserRegister model) { using (LoginDbContext db = new LoginDbContext()) { if (db.UserRegisters.Where(a => (a.UserName == model.UserName)).Count() > 0) { return Json(new { result = "error", content = "用戶名已經存在" }); } if (db.UserRegisters.Where(a => a.UserEmail == model.UserEmail).Count() > 0) { return Json(new { result="error", content="郵箱已經存在"}); } db.UserRegisters.Add(model); db.SaveChanges(); return Json(new { result="success",content="歡迎你"+model.UserName}); } }
5、css3美化頁面
這里主要用了css3里的漸變、下拉陰影、文本陰影等特效
漸變的css代碼為： -webkit-前綴的是為了適用於chrome safari瀏覽器，-moz-是為了適用於火狐，-o-適用於opera瀏覽器，不帶前綴的為css3標准規范。
/*不支持css3時顯示此背景色，優雅降級*/ background:#d2d2d2; /*漸變默認是垂直方向的，這里傾斜角度為45 從#d2d2d2 漸變到#ccc*/ background:-webkit-gradient(linear,left top,left bottom,from(#d2d2d2),to(#ccc)); background:-webkit-linear-gradient(-45deg,#d2d2d2,#ccc); background:-moz-linear-gradient(-45deg,#d2d2d2,#ccc); background:-o-linear-gradient(-45deg,#d2d2d2,#ccc); background:linear-gradient(-45deg, #d2d2d2,#ccc);
下拉陰影的代碼為： （注意不要使用過火，下拉陰影非常消耗性能）
/*水平偏移量 垂直偏移量 模糊直徑 顏色*/ -webkit-box-shadow:8px 5px 15px #404040; -moz-box-shadow:8px 5px 15px #404040; box-shadow:8px 5px 15px #404040;
文本陰影的代碼為：
/*水平偏移量 垂直偏移量 模糊直徑 顏色*/ text-shadow:1px 1px 0.5em #fff;
源碼中還有一個使用css3的示例，未使用一張圖片，在manage文件夾下，效果圖如下：
ps：離職了，找工作中……廣州/深圳 圍觀簡歷
動動手指，點下支持吧，您的支持是我最大的動力！