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

Posted niuben

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用html5自带表单验证 并且用ajax提交的解决方法(附例子)相关的知识，希望对你有一定的参考价值。

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

在标准浏览器中，阻止浏览器默认行为使用event.preventDefault()，而在IE6~8中，使用returnValue属性来实现。

<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(event) 
            $.ajax(
                ......
            );
            //阻止submit表单提交
            event.preventDefault();
            //或者return false
            //return false;
        );
    </script>
</body>
</html>

 

 

 

以上是关于用html5自带表单验证 并且用ajax提交的解决方法(附例子)的主要内容，如果未能解决你的问题，请参考以下文章

html5 form表单提交怎么获得返回值

HTML5 必需属性不适用于 AJAX 提交

在LayUI表单中，有AJAX方式来提交表单吗

Yii框架用ajax提交表单时候报错Bad Request (#400): Unable to verify your data submission.

用$.ajax提交url没有反应，用from表单可以提交成功，请问怎么解决ajax不成功的问题

除了提交表单之外，触发 html5 电子邮件验证器失去焦点