表單送出總結(一)：表單的送出及驗證方法

　　關于表單送出,相信每個做過web開發的小夥伴,随随便便都能寫出來。但是需求不同,采取的方法也會有所差别，每當遇到稍微複雜一點的送出問題，自己總會搜尋一番資料，費時費力。在這裡總結出一些常用的表單送出案例，友善日後查閱。

1.使用onsubmit方法進行驗證.

　　在送出表單之前，對表單或者網頁中的資料進行檢驗。onsubmit指定的方法傳回true，則送出資料；傳回false不送出資料。

js驗證方法:

function check(){
    var val = $("#name").val();
    if(val==null||val==''){
        alert("内容不能為空!");
        return false;
    }
    return true;
}
           

html表單:

<form action="" onsubmit="return check();"> 
     <input type="text" id="name" value=""/>
     <input type="submit" value="submit"/>
 </form>
           

注意:

1. onsubmit裡一定要有return關鍵字，否則函數會直接執行，不傳回。
2. check一定要傳回一個boolean類型的傳回值
3. 送出必須是submit類型的.

2.submit按鈕上增加onclick事件.

　　此功能類似于上面form标簽中的onsubmit事件。

js驗證方法:

function check(){
    var val = $("#name").val();
    if(val==null||val==''){
        return false;
    }
    return true;
}
           

html表單:

<form action="" onsubmit="return check();"> 
     <input type="text" id="name" value=""/>
     <input type="submit" value="submit"     onclick="return check()"/>
 </form>
           

3.在button按鈕上增加送出事件

　　button上增加οnclick=”submit();”，這時候form标簽中的submit事件會失效,驗證方法寫在submit方法内。

　　js驗證方法:

function submit(){
    var val = $("#name").val();
    if(val==null||val==''){
        return false;
    }
    return true;
}
           

html表單:

<form action="" onsubmit="return check();"> 
     <input type="text" id="name" value=""/>
     <input type="submit" value="submit" onclick="return submit()"/>
 </form>
           

注意:

　　form表單裡可以使用button标簽替換submit（非ie浏覽器）。