html5 原生表单验证+ajax 提交

原创 2015年11月17日 21:24:28

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>

效果图这里写图片描述

相关文章推荐

表单前端验证+ajax异步请求

今天做了一个注册表单的各个字段的前端的验证,感觉能用,但不知道还有没有更好的方法,特别是阻止表单提交那块,用了4个变量,感觉有点麻烦,明天要后台验证,用到正则表达式,之前没用过,又可以尝试新的东西了 ...

Ajax的常用技巧(1)----实现表单数据验证

为了保证信息的有效性和正确性,防止数据的错误和无效,在使用数据之前,通常要对浏览者在客户端输入的数据进行验证。但是这种处理方式并不能解决所有的验证问题,例如,在进行用户信息注册时,客户端只能实现类似是...
  • pzhtpf
  • pzhtpf
  • 2012年08月12日 11:39
  • 4868

jquery---ajax异步提交+validate表单验证

$("#submitButton").click(function(){ //序列化表单 var param = $("#leaveSave").serialize(); $.aja...
  • markely
  • markely
  • 2014年04月30日 16:07
  • 4586

Form表单利用Jquery Validate验证以及ajax提交

详细讲解Form表单利用Jquery Validate验证以及ajax提交的过程,以及Jquery Validate使用中的input写法,Validate的标尺,Validate的自定义提示语,非空...
  • s445320
  • s445320
  • 2016年02月26日 13:27
  • 16457

表单验证后提交 两种方式 2016/07/10

————————————————前面比较啰嗦,具体方法在最后———————————— 今天使用ajax,在增加用户,点击保存后,先不提交,先判断填写的信息,然后确定是否提交。 这是做的第一个练手的...

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

一般表单的提交用的都是用button然后用ajax来提交,但是用button就不能触发html5的自带表单验证,用submit的话就又会直接提交表单。我百度了一下解决方法:        用su...
  • chWow
  • chWow
  • 2016年12月26日 15:36
  • 4521

Ajax提交post请求

前言:博主之前有篇文章是快速入门Ajax,主要是利用Ajax做简单的get请求,今天给大家分享一篇利用Ajax提交post请求,以及使用post时需要注意的地方,还是以案例的方式告诉大家。案例: 注...

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

一般表单的提交用的都是用button然后用ajax来提交,但是用button就不能触发HTML5的自带表单验证,用submit的话就又会直接提交表单。我百度了一下解决方法:        用su...

jquery---------ajax+validate表单异步提交验证

$("#submitButton").click(function(){ //序列化表单    var param = $("#leaveSave").serialize();    $.ajax({...

使用原生javascript实现ajax提交form表单

使用原生javascript实现ajax提交form表单============================1准备表单        首先我们需要编写一个html代码,这里我是采用nodejs里...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5 原生表单验证+ajax 提交
举报原因:
原因补充:

(最多只允许输入30个字)