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="开始扫描" 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> 

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