onsubmit阻止表单提交


在实际开发中往往会遇到检查表单数据的合法性,如果数据不合法,就不让其提交。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 提交表单验证</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>

<script language="javascript">
//--->
function checksubmit()
{
  
          // var input_data = $("#form1").serialize();
          var data_arr = $("#form1").serializeArray();
          $.each(data_arr, function(i, val){

               //  alert(val);  //返回对象
               // alert(i);
               //  alert(val.name);  // 返回数组元素名字
               // alert(val.value);     // 返回数组元素的值

            if(val.name == "email")
            {
                if(val.value == "")
                {
                  alert("邮件不能为空!");
                  $("#email").focus();
                  return false;
                }
               
            }

            if(val.name == "password")
            {
                if(val.value == "")
                {
                  alert("PWD不能为空!");
                  $("#pwd").focus();
                  return false;
                }
               
            }

          });


          return false;
        
         
}
//--->
</script>

<body>
<br/>
<br/>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <form class="form-horizontal" role="form" id="form1" method="post" action="#" onsubmit="return checksubmit()">
                <div class="form-group">
                     <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-10">
                        <input type="email" name="email" class="form-control" id="email" />
                    </div>
                </div>
                <div class="form-group">
                     <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-10">
                        <input type="password" name="password" class="form-control" id="pwd" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                             <label><input type="checkbox" />Remember me</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                         <button type="submit" class="btn btn-default">Sign in</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

</body>
</html>

代码很简单。

onsubmit阻止表单提交

注意以下几点:

1.<form onsubmit=”return false”>
其中,将false换成一个检验输入是否合法的函数,该函数返回false或true,则可以在函数返回false的时候阻止表单提交。

2.onsubmit=”return checksubmit()” 这里的return不能省掉。

3.checksubmit()函数里面的return true;可以省去,因为默认是返回true;


4 responses on “onsubmit阻止表单提交

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>