html5 原生表单验证+ajax 提交

html5 原生表单验证 + ajax 提交 无需任何第三方验证框架 通过pattern 和 oninvalid 属性统一验证表单 。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="#" method="post" onsubmit="return false">
            <input type="text" name="mobile" id="mobile" placeholder="请输入手机号码"
        pattern="^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$"  oninvalid="validateIt(this,'手机号码格式错误')" oninput="validateIt(this,'手机号码格式错误')" required/>

            <input type="text" name="age" id="address"  placeholder="请输入地址"
            pattern="^.{5,200}$"  oninvalid="validateIt(this,'地址不符合规范')" oninput="validateIt(this,'地址不符合规范')" required/>
            <button type="submit" id="submit" >提交</button>
        </form>

    </body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
       function validateIt(inputelement,errMsg){
          if(inputelement.validity.patternMismatch){
              inputelement.setCustomValidity(errMsg);
              }else{
              inputelement.setCustomValidity(''); //输入内容符合验证条件
           }
          return true;
        }
        $(function() {
    if ($("*:invalid") == 0) { // 如果验证都通过
        $("#submit").submit(function() {
            $.ajax({
                type: "post",
                url: "你的地址",
                data: $("form").serialize(),
                async: true,
                success: function(data) {
                    alert(data);
                },
                dataType: "json" // json 格式的返回值
            });
        });

    }
});
    </script>

效果图这里写图片描述

阅读更多
文章标签: oninvalid pattern
个人分类: javascript html5
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

html5 原生表单验证+ajax 提交

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭