1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>添加</title>
  6.     <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <form action="" method="get" id="signupForm" style="width: 300px">
  10.     <div class="form-group">
  11.         <label for="name">账号</label>
  12.         <input type="text" class="form-control" id="username" name="username" placeholder="请输入账号">
  13.         <label class="error">提示信息</label>
  14.     </div>
  15.     <div class="form-group">
  16.         <label for="name">密码</label>
  17.         <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
  18.         <label class="error">提示信息</label>
  19.     </div>
  20.     <div class="form-group">
  21.         <label for="name">确认密码</label>
  22.         <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="请输入密码">
  23.         <label class="error">提示信息</label>
  24.     </div>
  25.  
  26.     <button type="submit" class="btn btn-primary">添加</button>
  27.  
  28. </form>
  29. </body>
  30. </html>
  31. <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
  32.  
  33. </script>
  34. <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
  35. <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
  36. <script>
  37.  
  38.     $("#signupForm").validate({
  39.         onsubmit: true,// 是否在提交是验证
  40.         onfocusout: false,// 是否在获取焦点时验证
  41.         onkeyup: false,// 是否在敲击键盘时验证
  42.         rules: {
  43.             username: {
  44.                 required: true,
  45.                 minlength: 2
  46.             },
  47.             password: {
  48.                 required: true,
  49.                 minlength: 5
  50.             },
  51.             confirm_password: {
  52.                 required: true,
  53.                 minlength: 5,
  54.                 equalTo: "#password"
  55.             },
  56.         },
  57.  
  58.         messages: {
  59.  
  60.             username: {
  61.                 required: "请输入用户名",
  62.                 minlength: "用户名必需由两个字符组成",
  63.  
  64.             },
  65.             password: {
  66.                 required: "请输入密码",
  67.                 minlength: "密码长度不能小于 5 个字符"
  68.             },
  69.             confirm_password: {
  70.                 required: "请输入密码",
  71.                 minlength: "密码长度不能小于 5 个字符",
  72.                 equalTo: "两次密码输入不一致"
  73.             }
  74.         },
  75.         errorPlacement: function(error, element) {
  76.             error.appendTo(element.parent());
  77.         },
  78.         submitHandler:function (form) {
  79. //进行ajax传值
  80.             $.ajax({
  81.                 url : "{:url('/exam1/save')}",
  82.                 type : "post",
  83.                 dataType : "json",
  84.                 data: {
  85.                     user: $("#username").val(),
  86.                     password: $("#password").val()
  87.                 },
  88.                 success : function(msg) {
  89.                     //要执行的代码
  90.                     console.log(msg)
  91.                 }
  92.             });
  93.         }
  94.  
  95.     })
  96.  
  97. </script>

控制器：

  1. public function save(Request $request)
  2.     {
  3.         //
  4.         $data=$request->post();
  5.         return  json(['code'=>200,'message'=>'sucess','data'=>$data]);
  6. }

jQuery Validatede 结合Ajax 表单验证提交的更多相关文章

  1. boostrap ajax表单验证提交

    =============================================================================== 1. 1 <link href=& ...

  2. jquery php ajax 表单验证

    本实例用到 JQuery 类库本身的函数和功能,所有表单信息利用 PHPMailer 类库邮件的形式发送.   .创建一个表单 html 页面   表单部分 html 代码   以下为引用内容: &l ...

  3. 表单验证提交——submit与button

    之前做东西接触过表单验证提交,但是都是为了完成工作,做完就做完了,没有注过表单验证提交有几种方法,各方法都有啥区别.今天瞎折腾了一下,对他们研究了一下,如下是我个人的理解: submit: 从字面上看 ...

  4. 第一百五十四节，封装库--JavaScript，表单验证--提交验证

    封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...

  5. 使用Jquery.form.js ajax表单提交插件弹出下载提示框

    现象: 使用jquery的from做ajax表单提交的时候,后台处理完毕返回json字符串,此时浏览器提示下载一个json文件而不是在success里面继续解析该json对象. 具体的原因: 浏览器兼 ...

  6. 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证

    一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...

  7. jQuery html5Validate基于HTML5表单验证插件

    更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...

  8. MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框

    1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...

  9. jQuery实现用户注册的表单验证

    用户注册的表单往往是需要进行验证的,否则会有一些不否合规则的数据入库,后果会不堪设想,本文通过jquery来实现. <html>  <head>  <meta chars ...

随机推荐

  1. Android 三种菜单（Menu）的实现

    感谢大佬:https://blog.csdn.net/chileme/article/details/82944764 一.常用方法 java onCreateOptionsMenu(Menu men ...

  2. 基于Apache的Tomcat负载均衡和集群(2)

    反向代理负载均衡 (Apache+JK+Tomcat) 使用代理服务器可以将请求转发给内部的Web服务器,让代理服务器将请求均匀地转发给多台内部Web服务器之一上,从而达到负载均衡的目的.这种代理方式 ...

  3. LVS负载均衡群集部署——NAT模式

    LVS负载均衡群集部署--NAT模式 1.群集应用概述 2.NAT模式LVS负载均衡群集部署 1.群集应用概述: 存在的问题: 互联网应用中,随着站点对硬件性能.响应速度.服务稳定性.数据可靠性等要求 ...

  4. Spring Cloud 源码分析之OpenFeign

    OpenFeign是一个远程客户端请求代理,它的基本作用是让开发者能够以面向接口的方式来实现远程调用,从而屏蔽底层通信的复杂性,它的具体原理如下图所示. 在今天的内容中,我们需要详细分析OpenFei ...

  5. C++ 实现 Parsec

    前一段时间看到了梨梨喵聚聚写的Parser Combinator 在 C++ 里的 DSL, 感觉好厉害, 正好毕设里要写一部分前端, 昨天又把这篇文章看了一遍, 想着我也要用这么酷炫的东西来参与一下 ...

  6. socket 套接字编程

    今日内容 socket 套接字编程 简易服务端与客户端代码实现 通信循环 黏包现象(TCP协议) 报头制作.struct 模块.封装形式 内容详细 一.socket 套接字编程 实现一款能够进行数据交 ...

  7. NeurIPS 2017 | TernGrad: Ternary Gradients to Reduce Communication in Distributed Deep Learning

    在深度神经网络的分布式训练中,梯度和参数同步时的网络开销是一个瓶颈.本文提出了一个名为TernGrad梯度量化的方法,通过将梯度三值化为\({-1, 0, 1}\)来减少通信量.此外,本文还使用逐层三 ...

  8. AfterLogicWebMail CSRF导致密码可修改

    实验目的 了解CSRF漏洞导致Webmail管理员帐号密码任意被修改 实验原理 当我们打开或者登陆某个网站的时候,浏览器与网站所存放的服务器将会产生一个会话(cookies),在这个会话没有结束时,你 ...

  9. Smartbi代替Alteryx+Tableau，用1份投入如何获得2份回报？

    Smartbi是国内一家知名的BI厂商,Alteryx.Tableau是国外两款重要的BI工具,它们都是在BI领域内提供特定的功能,以满足企业的数据分析需求.那么,对于用户来说,在选择BI工具的时候要 ...

  10. 思迈特软件Smartbi发展再提速，完成B+轮过亿战略融资

    2021年4月,思迈特软件(Smartbi)宣布完成亿级B+轮战略融资,本轮投资方为领先的全球企业级数据分析和组织智能服务平台提供商--明略科技.此前,思迈特软件曾先后获得来自价值资本.方广资本的数千 ...