一個小型的表單處理框架分享

做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中做事後處理。