js实现表单提交后不重新刷新当前页面，并停留在当前页面

参考文章：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="开始扫描" οnclick="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> 

JS:

<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>

关键：

在FORM表单后添加一个iframe

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

点保存提交事件里面，当用户输入不满足要求时设置提交的表单为iframe

document.forms[0].target="rfFrame";       这样即提交了FORM保存了数据,页面也不会跳转.

用户输入满足要求，则提交表单为<form>.