1. 程式人生 > >完整的表單互動

完整的表單互動

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中的資料就是我們後臺傳過來的資料,後臺該怎樣寫還是怎樣寫,不影響。