form表單驗證失敗,阻止表單提交
效果演示:
貼上完整代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ var t=$("#text").val().length; if(t<=10){ alert("長度不夠!!") }else{ $(this).prop("type","submit"); } }); }); </script> </head> <body> <form action="http://www.baidu.com" method="post"> <input type="text" id="text" /> <input type="button" value="提交查詢" id="btn"/> </form> </body> </html>
原理:驗證#test內容長度是否大於等於10,true:彈窗長度不夠,false:設置input按鈕的類型為submit,即可跳轉到百度,button這個屬性驗證成功無法跳轉到action請求頁面,只有submit按鈕才可以