參考文章：http://www.cnblogs.com/limeiky/p/5599705.html

在填寫表單的時候，如果有某項為空或者不合法，在使用者點選提交後，頁面應當無法跳轉並且頁面內容不會重新整理；只有當用戶填寫內容滿足要求後，點選提交按鈕頁面才會跳轉到指定連結處。

針對這一需求，用js結合<iframe>標籤可以簡單實現。

html:

       <form class="form-horizontal" role="form" id="config" action="xxx.php" method="POST">

        <div class="settings" id="settings">
            <div class="row">
              <div class="col-md-6">
                <label for="url">掃描網址</label>
                <input type="text" class="form-control" id="url" name="url" placeholder="http://site.com/vuln.php?id=1">
              </div>
            </div>
          <br />
        </div>
        <br />
        <div class="col-md-6" align="center">
            <input type="submit" class="btn " name="submit" value="開始掃描" onclick="urlNotNull()"/>
        </div>
        <p id="urlNull"  style="display:none;" ><font style="color:red;">掃描網址不可為空！</font></p>
        <p id="urlError"  style="display:none;" ><font style="color:red;">掃描網址格式錯誤！</font></p>
        <br /><br />
      </form>
        <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe> 
 

<script type="text/javascript">
 /*動態顯示提示資訊*/
  function hasClass(obj,cls){  // 判斷obj是否有此class
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
  }
  function addClass(obj,cls){ //給 obj新增class
    if(!this.hasClass(obj,cls)){ 
      obj.className += " "+cls;
    }
  }
  function removeClass(obj,cls){ //移除obj對應的class
    if(hasClass(obj,cls)){ 
      var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
      obj.className = obj.className.replace(reg," ");
    }
  }
   function checkUrl(url){  //驗證url
    var pattern = /(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
    if(url!= ""){ //不為空
        if(!pattern.test(url)){ //若url格式不正確
            addClass(ele.url,"borderRed"); //新增class
            document.getElementById("urlError").style.display = "";
            return false;
        }else{
             removeClass(ele.url,"borderRed"); //移除class
             document.getElementById("urlError").style.display = "none";
             return true;
        }
      removeClass(ele.url,"borderRed"); //移除class
      document.getElementById("urlNull").style.display = "none"; //不顯示
    }else{ //為空
      addClass(ele.url,"borderRed"); //新增class
      document.getElementById("urlNull").style.display = ""; //顯示
      return false;
    }
  } 
  var ele = { //存放各個input欄位obj
      url: document.getElementById("url")
    };
    ele.url.onblur = function(){ //失去焦點則檢測
      checkUrl(ele.url.value);
    }
 
 /*提交時檢驗URL不可為空*/
 function urlNotNull(){
     var url = document.getElementById('url').value;
     if(checkUrl(url)==false){ //輸入url不合法
        document.getElementById("urlNull").style.display = ""; //顯示
        document.forms[0].target="rfFrame";  //將提交的表單設定為iframe
     }else { //url正確，將提交的表單設定為目標表單
         document.forms[0].target="config";
     }
 }
  </script>
 

　　<iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe> 

document.forms[0].target="rfFrame";       這樣即提交了FORM儲存了資料,頁面也不會跳轉.

使用者輸入滿足要求，則提交表單為<form>.