利用JS 阻止表單提交

情景一：不存在Ajax非同步操作

 1 使用背景：會議室預定管理系統中，當表單提交的時候需要驗證預約的時間是否符合預定規則（不需要通過訪問伺服器），否則提示錯誤信息，阻止表單提交。

 2 相關技術點：

form的兩個事件

1. submit，提交表單，如果直接調用該函數，則直接提交表單
2. onSubmit，提交按鈕點擊時先觸發，然後觸發submit事件。如果不加控制的話，預設返回true，因此表單總能提交。

3 Demo

頁面代碼：

1 @using (Html.BeginForm(null, null, null, FormMethod.Post, new { onSubmit = "returncheck();" }))  // 註意：此處事件的寫法：onsubmit = "return + 事件名（）"
2  { 
     <input type="text" name="name">
3   <input type="submit" value="提交">
4  }

JS代碼：

function check(){
    if (document.testform.name.value=="admin")    {        
        alert("姓名不正確");        
        return false;    
        }
    else{
        return true;
        }
}

情景二：需要Ajax非同步操作

1 使用背景：會議室預定管理系統中，當表單提交的時候需要驗證預約的時間是否符合預定規則（需要通過訪問伺服器數據判斷），否則提示錯誤信息，阻止表單提交。

 2 相關技術點： 

在下麵的例子中，通過onsubmit() 方法阻止提交無效的，因為，  JS 中 Ajax 部分與 其他部分是非同步進行的，或者說同時進行，代碼執行（過程A）1/5行後直接執行23行，與此同時（過程B）6/22行也在進行，顯然過程B的執行進度會慢，所以還沒有等到判斷返回值，A就已經執行完畢，預設Str是true，所以ajax中的判斷是無效的。

示例：   Javascript代碼：

 1    $("#save").click(function mysubmit() {
 2             var str;
 3             var startime = $("#datetime1").val();
 4             var endtime = $("#datetime2").val();
 5             var num = $("#mark").val();
 6             $.ajax({
 7                 type: "POST",
 8                 url: "/MeettingRoom/meetting",
 9                 data: { strattime: startime, endtime: endtime, num: num },
10                 success: function (sesponseTest) {
11                     if (sesponseTest == "1") {
12                         str = false;                                           
13                         document.getElementById("metend").style.display = "block";
14 
15                     }
16                     else {
17                         str = true;                                          
18                         document.getElementById("metend").style.display = "none";                        
19                     }
20                 }
21 
22             });
23              return str;
24 
25         });   // 

<form onsubmit = "return check()"></form>

3 化解方法Demo：

Javascript代碼：

 1   <script>
 2         $("#save").click(function mysubmit() {
 3             var str;
 4             var startime = $("#datetime1").val();
 5             var endtime = $("#datetime2").val();
 6             var num = $("#mark").val();
 7             $.ajax({
 8                 type: "POST",
 9                 url: "/MeettingRoom/meetting",
10                 data: { strattime: startime, endtime: endtime, num: num },
11                 success: function (sesponseTest) {
12                     if (sesponseTest == "1") {
13                         str = false;                                           
14                         document.getElementById("metend").style.display = "block";
15                     }
16                     else {
17                         str = true;                                          
18                         document.getElementById("metend").style.display = "none";
19                         $("#form").submit();           // 將提交的進程放在判斷過程中，被迫提交操作等待後臺訪問完畢後執行
20                     }
21                 }
22 
23             });
24 
25         });
26     </script>

  <button class="btn blue" type="button"  id ="save" ><i class="icon-ok"></i>保存</button>

2016/04/12  ------神奇的Javascript。