用html5自带表单验证并且用ajax提交的解决方法(附代码)

最新推荐文章于 2024-08-28 12:43:39 发布

如果没有_明天

最新推荐文章于 2024-08-28 12:43:39 发布

阅读量1.4k

点赞数

分类专栏： HTML

HTML 专栏收录该内容

7 篇文章

订阅专栏

一般表单的提交用的都是用button然后用ajax来提交，但是用button就不能触发HTML5的自带表单验证，用submit的话就又会直接提交表单。我百度了一下解决方法：

用submit来提交表单，然后在js中监听submit方法，用ajax提交表单最后阻止submit的自动提交。

我百度到了解决方法但是没有找到简单的Demo，在这里我写了一个简单的Demo附上：

[html]view plaincopy 
    
 <html>  
 <head>  
     <script type="text/javascript" src="jquery-1.9.0.min.js"></script>  
 </head>  
 <body>  
     <form action="" id='submitform'>  
         username: <br>  
         <input type="text" name="username" value="" required="required"> <br>  
         password: <br>  
         <input type="text" name="password" value="" required="required"> <br><br>  
         <input type="submit" value="Submit">  
     </form>  
     <script type="text/javascript" language="javascript">  
         $("#submitform").on("submit", function(ev) {  
             $.ajax({  
                 ......  
             });  
             //阻止submit表单提交  
             ev.preventDefault();  
             //或者return false  
             //return false;  
         });  
     </script>  
 </body>  
 </html>  