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

本文转载自查看原文 2017-08-16 15:40 2146 遇到的问题

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

参考资料：

试验过程：

服务器端使用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>来提交表单

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 表单的验证：客户端验证和服务器端验证 ASP.NET 表单验证方法与客户端(浏览器)服务器交互机制的故事 node.js – 服务器端的客户端证书验证,DEPTH_ZERO_SELF_SIGNED_CERT错误服务器和客户端的理解 ROS服务器与客户端客户端-服务器模式 android客户端向服务器端验证登陆方法的实现1 mvc中服务器端、客户端属性验证 Android 客户端 okhttp3 与服务器之间的双向验证加密解密(2)＊客户端，服务器，CA(Certificate Authority)，公钥，私钥，证书，签名，验证