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提交post请求

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

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

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

AJAX实例的表单验证

  • 2007年11月29日 09:56
  • 1KB
  • 下载

form表单加js或ajax验证

学习笔记今天要给表单提交添加错误提示,当每天提交够五次的时候,给出提示不让提交,为了提示找到一个办法。这样可以提示错误后防止表单提交代码:原代码form提交,button 的 type 属性为subm...
  • ling811
  • ling811
  • 2016年06月16日 15:42
  • 523

ajax异步实现表单的无刷新验证

在 实现ajax异步实现表单的无刷新验证之前我们先要了解什么是异步什么是同步 "同步模式"就是上一段的模式,后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的、同步的;"...
  • zyz0728
  • zyz0728
  • 2015年10月15日 21:49
  • 2045

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

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

Bootstrapvalidator表单验证+ 模态框 Ajax请求 Demo

BootStrapValidator 表单验证+ 模态框 Ajax请求 Demo BooStrapValidator网络引用地址:http://www.bootcdn.cn/bootstrap-v...
  • Peng_Hong_fu
  • Peng_Hong_fu
  • 2017年04月26日 18:14
  • 6422

使用jquery中的ajax方法验证表单

在进行用户从注册的时候,进场需要校验email或username是否被注册,这时候需要ajax验证,但是ajax验证无法返回回调函数的值到外部的校验方法,如 function CheckForm()...
  • andy1219111
  • andy1219111
  • 2011年10月28日 16:18
  • 5592

Ajax验证表单(同步验证)

在进行用户从注册的时候,进场需要校验email或username是否被注册,这时候需要ajax验证,但是ajax验证无法返回回调函数的值到外部的校验方法,如 function CheckForm...
  • u014033756
  • u014033756
  • 2016年06月09日 10:12
  • 1119

使用jquery validate和ajax进行表单验证并向后台提交数据

以前我都是在页面中点击submit按钮后提交给某个url一个post数据,使用validate后我们就可以使用html页面和js来异步的向后台提交数据,具体代码如下 $("#form-product...
  • zhou_shaowei
  • zhou_shaowei
  • 2017年03月15日 21:07
  • 6670
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5 原生表单验证+ajax 提交
举报原因:
原因补充:

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