一個小型的表單處理框架分享
做WEB項目的過程中難免涉及到表單的處理,包括:數據校驗、數據提交、返回處理、信息提示等。
下面的代碼就是從前不久一個項目中提煉出來的,希望對大家有些幫助。
下面是主要的代碼片段:
<form name="form-setusername" id="form-setusername" > <input type="text" id="username" name="username" rows="1" /> <span id="text_username"></span> <input type="submit" name="submit" id="submit" data-url="change_userinfo.php"> </form> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/afs.js"></script> <script> function beforepost(targetform) { if ($('#username').val().length==0) { alertMessage("用戶名不能為空","error"); return false; } return true; } function afterpost(retdata) { $('#text_username').html(retdata.data.username); } $(function(){ localStorage.isSubmiting = 0; $('#form-setusername input[type="submit"]').on("click", { target: "#form-setusername", beforepost: "beforepost", afterpost: "afterpost", }, ajaxFormSubmit); }); </script>
說明:
- form必須定義一個id,在后面會用到
- submit按鈕的data-url屬性指定了后端處理程序
- afx.js就是本框架的JS代碼文件
- 里面用到了localStorage,因此只能適用于HTML5瀏覽器。當然也可以考慮把這部分代碼去掉,因為并非核心部分。
- beforepost和afterpost分別指定了提交前后要調用的JS函數,可以在beforepost中做數據校驗,在afterpost中做事后處理。
下載地址:
https://github.com/zhangfanwen/ajaxformsubmit/archive/master.zip
浙公網安備 33010602011771號