歡迎大家轉載，轉載請注明出處！
希望這個筆記對自己和大家有用，但是本人水平有限，如果出錯的地方，希望大家指出，多多批評，謝謝！
今天使用easyui自帶的form提交方式寫一個注冊表單，使用其自帶的ValidateBox驗證方式並擴展其驗證方法：
這篇筆記竟然被移出首頁了，有點小納悶，好吧，以后寫代碼注釋多寫到代碼外面把，寫在代碼里面，只不過是為了自己和大家看得時候方便而已。
這里出發form的submit事件，將數據提交給后台
這里的提交個人覺得不是純正的ajax提交，因為有刷新頁面 //以為我們的form有validate方法，而且在源碼中也有判斷，所以我們直接這樣submit就可以觸發validatebox的驗證方法
$.fn.form.defaults={url:null,onSubmit:function(_2e){return $(this).form("validate");
如果我們不使用easyui的form框架的提交方式，用JQ的異步提交，我們就需要這樣寫：
if($("#regist").form("validate")){}
<script type="text/javascript"> $(function () { //初始化登陸層 initLogin(); //首先隱藏注冊的層 $("#regist").css("display", "none"); //注冊Form initForm(); }); //個人習慣方法化書寫 function initLogin() { $("#login").dialog({ closable: false, //右上角的關閉按鈕，因為dialog框架關聯的是window框架，window框架關聯的是panel框架，所以該API是在panel框架中找到的 title: "登陸界面", //dialog左上角的名稱 modal: true, //模式化 width: 300, height: 200, buttons: [//dialog右下角的按鈕，以Json數組形式添加 { text: "登錄", //按鈕名稱 iconCls: "icon-save", //按鈕左側顯示的圖片 handler: function () {//按鈕點擊之后出發的方法 //JQuery的ajax異步后台提交 loginFunc(); } }, { text: "注冊", handler: function () { //注冊明天再寫，將用easyui自帶的form提交方式，以及自帶的ValidateBox驗證方式 registFunc(); } }] }); } //用戶登錄 function loginFunc() { //這里我寫的是最簡略的JQuery異步方法，如想深入了解，請參看JQuery參考手冊 //要想后台傳遞的參數 var res = $("#loginForm").serialize(); //將form表單的內容序列化,這里也可以使用原始的取值方法 //mvc以及webform中可以直接傳遞到后台 $.post("/Login.ashx", res, function (data) { if (data == "ok") {//后台傳遞過來 ok 表示登陸成功 $("#dd").dialog("close"); //關閉該dialog $.message.show({//瀏覽器右下角彈框，我列出了幾個屬性，具體請看API title: '提示', msg: '恭喜您，登陸成功！', timeout: 5000, //彈框保留時間 showType: 'slide'//展示樣式 }); } else { $.message.alert('提示', "登陸失敗", "error"); //這里使用easyui的message框架，彈出提示信息 //這里有三個參數 第一個是Title 第二個是顯示信息 第三個是現實圖標樣式 有error，warning等，具體請看API或者demo } }); } //注冊方法 function registFunc() { //彈出注冊的層，並關閉當前登錄的層 $("#login").dialog("close"); //初始化注冊層 initRegist(); } //初始化注冊層 function initRegist() { //注冊層隱藏關閉 $("#registForm").dialog({ closable: false, title: "注冊界面", modal: true, width: 300, height: 600, buttons: [ { text: "注冊", handler: function () { //這里出發form的submit事件，將數據提交給后台 //這里的提交個人覺得不是純正的ajax提交，因為有刷新頁面 //以為我們的form有validate方法，而且在源碼中也有判斷，所以我們直接這樣submit就可以觸發validatebox的驗證方法 //$.fn.form.defaults={url:null,onSubmit:function(_2e){return $(this).form("validate"); //如果我們不使用easyui的form框架的提交方式，用JQ的異步提交，我們就需要這樣寫： //if($("#regist").form("validate")){} $("#registForm").submit(); } }, { text: "關閉", handler: function () { //關閉注冊的dialog $("#regist").dialog("close"); //開啟登陸層 $("#login").dialog("open"); } }] }); } //初始化注冊Form function initForm() { $("#registForm").form({ url: "Login.ashx", success: function (data) { if (data == "ok") {//注冊成功 $.message.alert('提示', "注冊成功", "error"); $("#dd").dialog("open"); } else { $.message.alert('提示', "注冊失敗", "error"); } } }); } //這里是擴展validatebox的方法 $.extend($.fn.validatebox.defaults.rules, { phone: { // 驗證手機號碼 validator: function (value) { return /^(13|15|18)\d{9}$/i.test(value); //這里就是一個正則表達是 }, message: '手機號碼格式不正確'//這里是錯誤后的提示信息 }, pwdagain: { validator: function (value, param) { return value == $(param[0]).val(); //value是不用我們去填寫的，但是param是需要我們提供的，使用方法為 pwdAgain[""] }, message: '兩次密碼不一致'//這里是錯誤后的提示信息 } }); </script>
這里的文本框全部采用validatebox框架，並采用其自帶的驗證方式，但是自帶的驗證方式並不能滿足我們在編程中的需求，所以我會擴展幾個他的驗證方法，其中擴展方法我在之前的博客中已經寫過，這里再給大家演示一下
data-options在這個里面寫一些規則，比如easyui自帶的驗證方式，required:true必填項，validType:'email'必須是郵箱格式，當然這些我們都可以自己去擴展，其中自己擴展的方法書寫形式類似validType:'email'，validType:'phone'這是我自己擴展的驗證手機號碼的方法
這是validatebox自帶remote驗證方法的源碼，我們可以看出，這里不是異步的，所以使用可能會早場卡屏，不推薦使用
remote: { validator: function (_2a, _2b) {
var _2c = {};
_2c[_2b[1]] = _2a;
var _2d = $.ajax({ url: _2b[0], dataType: "json", data: _2c, async: false, cache: false, type: "post" }).responseText;
return _2d == "true";
}, message: "Please fix this field."
}
<body> <div id="login"> <form id="loginForm" method="POST"> <table> <tr> <th> 用戶名 </th> <td> <input name="username" type="text" /> </td> </tr> <tr> <th> 密碼 </th> <td> <input name="password" type="password" /> </td> </tr> </table> </form> </div> <!-- 用戶注冊--> <div id="regist" style="border: 1px #0000cd solid;"> <form id="registForm" method="POST"> <table> <tr> <th> 用戶名 </th> <td> <input name="name" id="name" class="easyui-validatebox" data-options="required:true" /> <!-- 這里的文本框全部采用validatebox框架，並采用其自帶的驗證方式，但是自帶的驗證方式並不能滿足我們在編程中的需求，所以我會擴展幾個他的驗證方法，其中擴展方法我在之前的博客中已經寫過，這里再給大家演示一下--> <!-- data-options在這個里面寫一些規則，比如easyui自帶的驗證方式，required:true必填項，validType:'email'必須是郵箱格式，當然這些我們都可以自己去擴展，其中自己擴展的方法書寫形式類似validType:'email'，validType:'phone'這是我自己擴展的驗證手機號碼的方法--> <!--這是validatebox自帶remote驗證方法的源碼，我們可以看出，這里不是異步的，所以使用可能會早場卡屏，不推薦使用 remote: { validator: function (_2a, _2b) { var _2c = {}; _2c[_2b[1]] = _2a; var _2d = $.ajax({ url: _2b[0], dataType: "json", data: _2c, async: false, cache: false, type: "post" }).responseText; return _2d == "true"; }, message: "Please fix this field." }--> </td> </tr> <tr> <th> 密碼 </th> <td> <input name="pwd" id="pwd" class="easyui-validatebox" data-options="required:true" /> </td> </tr> <tr> <th> 重復密碼 </th> <td> <input name="passwordagain" id="passwordagain" class="easyui-validatebox" data-options="required:true" validtype="pwdagain['#registForm input[name=pwd]']" /><!--取得重復密碼中的值並傳入，這里調試了半天，因為各種不仔細報錯，希望大家避免--> <!-- 經驗證，data-options="required:true，validType='pwdagain['#registForm input[name=pwd]']'"這種寫法會報錯，望大家注意--> </td> </tr> <tr> <th> 郵箱 </th> <td> <input name="mail" id="mail" class="easyui-validatebox" data-options="required:true,validType:'email'" /> </td> </tr> <tr> <th> 手機 </th> <td> <input name="phone" id="phone" class="easyui-validatebox" data-options="required:true,validType:'phone'" /> </td> </tr> </table> </form> </div> </body>
