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

时间：2022-11-06 12:52:36

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

标签：

相关文章