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>

代码很简单。

注意以下几点：

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

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

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

一个简单的测试页面：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>获取用户Token</title>

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<script language="javascript">

    //--->

    function checksubmit() {

        // var input_data = $("#form1").serialize();

        var user_id = $("#name").val();

        if(user_id < 1){

            alert("用户ID不能为空！");

            $("#name").focus();

            return false;

        }

    }

</script>

<h1>获取TOKEN</h1>

<body style="margin:60px;">

<form role="form" method="get" action="get_app_user_token.php" onsubmit="return checksubmit()">

    <div class="form-group">

        <label for="name">用户ID</label>

        <input type="text" class="form-control" name="user_id" id="name"

               placeholder="请输入用户ID">

    </div>

    <button type="submit" class="btn btn-default">提交</button>

</form>

<?php

$user_id = (int)$_GET['user_id'];

if($user_id > 0)

{

    $sql = "select * from user_tbl where user_id = {$user_id} limit 0,10";

    $ret =  db_query($sql);

    if(empty($ret))

    {

        dump('没有该用户的设备Token记录！');

    }else

    {

        dump($ret);

    }

}

?>

</body>

</html>

巴特西

onsubmit阻止表单提交

最新文章

热门文章