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

最新推荐文章于 2024-09-04 19:41:32 发布

小曹小盆友

最新推荐文章于 2024-09-04 19:41:32 发布

阅读量8.5k

点赞数 3

分类专栏： html5 文章标签： ajax html5

本文链接：https://blog.csdn.net/chWow/article/details/53886629

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一般表单的提交用的都是用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插件或者其他表单验证插件。