• 在客户端先通过JS验证后再将表单提交到服务器


     问题:想要在客户端先通过JS验证后再将表单提交到服务器

    参考资料:

    jQuery 事件 - submit() 方法

    试验过程:

    服务器端使用PHP

     1 <html>
     2 <head>
     3     <script type="text/javascript" src="plugins/jquery-3.2.1.min.js"></script>
     4     <script type="text/javascript">
     5         $(document).ready(function () {
     6             $("form").submit(function () {
     7                 var FirstName=$("input[name=FirstName]").val();
     8                 var LastName=$("input[name=LastName]").val();
     9                 if((FirstName==="") || (LastName==="")){
    10                     alert("请输入全部信息");
    11                     return false;
    12                 }else{
    13                     return true;
    14                 }
    15             });
    16             $("button").click(function () {
    17                 $("form").submit();
    18             })
    19         });
    20     </script>
    21 </head>
    22 <body>
    23 <form name="input" action="" method="get">
    24     First name:
    25     <input type="text" name="FirstName"  size="20">
    26     <br />Last name:
    27     <input type="text" name="LastName"  size="20">
    28     <br />
    29     <input type="submit" value='使用input提交,type="submit"'><br/>
    30     <input type="submit" value='使用input提交,type="submit" name="submit"' name="submit"><span>有name属性,会导致点击&lt;button type="button"&gt;标签的按扭无法提交到服务器</span><br/>
    31     <button type="button">使用button提交type="button"</button>
    32     <span>无法提交&lt;input type="submit" name="submit"&gt;的信息,因此不能将表单提交到服务器</span><br/>
    33     <button>使用button提交,无type</button><span>默认type="submit",JS会验证两次</span><br/>
    34     <button type="submit">使用button提交type="submit"</button><span>JS会验证两次,同上</span><br/>
    35 </form>
    36 <hr/>
    37 表单外:<br/>
    38 <button>触发表单域的 submit 事件</button>
    39 </body>
    40 </html>
    41 <?php
    42 if(!empty($_GET['FirstName']) && !empty($_GET['LastName'])){
    43     echo '<p>Fisrt Name:'.$_GET['FirstName'].'</p>';
    44     echo '<p>Last Name:'.$_GET['LastName'].'</p>';
    45 }
    46 ?>

    html的两种提交按钮submit和button

    注意1:

    在有<input type="submit"  name="submit" value="提交"/>的情况下使用<button type="button">提交</button>会导致通过JS验证后表单不提交到服务器。

    原因不详

    注意2:

    试验中<button type="submit">提交</button>,会走两次JS验证,

    原因应该是button自身的type="submit"执行了一次,click事件中的$("from").submit();执行了一次。

     最终结论:

    建议使用<button type="submit">Submit</button>来提交表单

  • 相关阅读:
    POJ-2393
    POJ-1328
    POJ-2376
    CF-811B
    CF-811A
    CF-816B
    P1111 修复公路
    P2777 [AHOI2016初中组]自行车比赛
    P1889 士兵站队
    P1459 三值的排序 Sorting a Three-Valued Sequence
  • 原文地址:https://www.cnblogs.com/jeacy/p/7373674.html
Copyright © 2020-2023  润新知