标签归档:form

JS阻止表单提交的方法

一、纯JavaScript验证

  1. <html>
  2. <head>
  3. <meta http-equiv=”Content-Type” content=”text/html; charset=gbk”>
  4. <title>JavaScript禁止提交表单</title>
  5. <script type=”text/javascript”>
  6. function getObj(id){
  7.     var Obj = document.getElementById(id).value;
  8.     return Obj;
  9. }
  10. function check(){
  11.     if(getObj(“test”)==””){
  12.         alert(“文本框输入为空,不能提交表单!”);
  13.         document.getElementById(“test”).focus;
  14.         return false;//false:阻止提交表单
  15.     }
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <form action=”index.htm” method=”post” onsubmit=”return check()”>
  21.     <input type=”text” name=”test” id=”test”>
  22.     <input type=”submit” value=”提交”>
  23. </form>
  24. </body>
  25. </html>

 

二、jQuery验证阻止表单提交
  1. <html>
  2. <head>
  3. <meta http-equiv=”Content-Type” content=”text/html; charset=gbk”>
  4. <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.10.2.min.js”></script>
  5. <script type=”text/javascript”>
  6. $(document).ready(function(){
  7.     $(“:submit[id=tijiao]”).click(function(check){
  8.         var val = $(“:text[id=test]”).val();
  9.         if(val==””){
  10.             alert(“文本框输入为空,不能提交表单!”);
  11.             $(“:text[id=test]”).focus();
  12.             check.preventDefault();//此处阻止提交表单
  13.         }
  14.     });
  15. });
  16. </script>
  17. <title>jQuery禁止提交表单</title>
  18. </head>
  19. <body>
  20. <form action=”index.htm” method=”post”>
  21.     <input type=”text” name=”test” id=”test”>
  22.     <input type=”submit” id=”tijiao” value=”提交”>
  23. </form>
  24. </body>
  25. </html>