問題：想要在客戶端先通過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屬性，會導致點擊<button type="button">標簽的按扭無法提交到服務器</span><br/> 31 <button type="button">使用button提交type="button"</button> 32 <span>無法提交<input type="submit" name="submit">的信息，因此不能將表單提交到服務器</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 ?>
注意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>來提交表單