html5 原生表单验证+ajax 提交

最新推荐文章于 2024-07-16 08:30:00 发布

xiawu1990

最新推荐文章于 2024-07-16 08:30:00 发布

阅读量4.3k

点赞数 2

分类专栏： javascript html5 文章标签： oninvalid pattern

本文链接：https://blog.csdn.net/xiawu1990/article/details/49893473

版权

javascript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

html5

8 篇文章 0 订阅

订阅专栏

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>

效果图这里写图片描述

xiawu1990

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5 原生表单验证+ajax 提交

html5 原生表单验证 + ajax 提交无需任何第三方验证框架通过pattern 和 oninvalid 属性统一验证表单。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="
复制链接

扫一扫

专栏目录