完整的表單互動
1、在html頁面上寫一個簡單的表單樣式
<form id='form1' action="#" method="post" onsubmint="return checkform()">
<input type="text" name="username" id="username"/>
<input type="submit" value="提交"/>
</form>
2、表單的驗證通過onsubmit中的checkform()方法實現,注意在onsubmit中一定要寫明是“return checkform()”這樣當表單驗證返回false的時候表單就不會提交,當表單驗證返回true的時候就會訪問action中的url連結進行跳轉。
一個簡單的驗證如下:
function checkform()
{
var name=document.getElementById("username").value;//根據input框id獲取輸入的value值
if(name==null || name="")
{
dialog.alert("溫馨提示","使用者名稱不能為空");
return false;
}
return true;
}
其中的dialog是自己寫的對話方塊樣式,直接用alert就可以輸出提示資訊。
3、有時候頁面還需要接收表單提交後從後臺傳回來的值,這裡是通過引用jquery.form.js 和jquery.js 來實現的。
$(function(){
$("#form1").ajaxForm(function(data){
if(data=="ok")
dialog.alert("溫馨提示","儲存成功");
else
dialog.alert("溫馨提示","儲存失敗");
})
})
form1就是我們form表單的id值,data中的資料就是我們後臺傳過來的資料,後臺該怎樣寫還是怎樣寫,不影響。