一个小型的表单处理框架分享

 

做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