html5表单与Jquery Ajax结合使用

html5的表单控件提供了很多格式检测功能,可以省去很多烦人的javascript验证代码,例如pattern属性和require属性。

问题:

一般表单的提交用的都是用button然后用ajax来提交,但是用button就不能触发HTML5的自带表单验证,用submit的话就又会直接提交表单

解决办法:

就是依然使用 input submit作为提交按钮,但在表单的提交事件里阻止进一步动作,转为ajax发送请求,这里贴出JQuery的代码:

<html>
<head>
    <script type="text/javascript" src="jquery-1.9.0.min.js"></script>
</head>
<body>
    <form action="" id='form'>
        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">
        $("#form").on("submit", function(ev) {
            $.ajax({
                ......
            });
            //阻止submit表单提交
            ev.preventDefault();
            //或者return false
            //return false;
        });
    </script>
</body>
</html>

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

还有就是form标签上的method属性会影响submit事件

标签

发表评论

电子邮件地址不会被公开。 必填项已用*标注