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

来源:互联网 发布:淘宝掌中宝是什么 编辑:程序博客网 时间:2024/03/29 19:10

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

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

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


<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>

最后说一下:H5自带的验证只是比较简单的验证,不是很完美,只适合做比较简单的验证。最好是用jQ的Validation插件或者其他表单验证插件。