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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值