<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<form action="" method="get" id="signupForm" style="width: 300px">
<div class="form-group">
<label for="name">账号</label>
<input type="text" class="form-control" id="username" name="username" placeholder="请输入账号">
<label class="error">提示信息</label>
</div>
<div class="form-group">
<label for="name">密码</label>
<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
<label class="error">提示信息</label>
</div>
<div class="form-group">
<label for="name">确认密码</label>
<input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="请输入密码">
<label class="error">提示信息</label>
</div> <button type="submit" class="btn btn-primary">添加</button> </form>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script> $("#signupForm").validate({
onsubmit: true,// 是否在提交是验证
onfocusout: false,// 是否在获取焦点时验证
onkeyup: false,// 是否在敲击键盘时验证
rules: {
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
}, messages: { username: {
required: "请输入用户名",
minlength: "用户名必需由两个字符组成", },
password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字符"
},
confirm_password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字符",
equalTo: "两次密码输入不一致"
}
},
errorPlacement: function(error, element) {
error.appendTo(element.parent());
},
submitHandler:function (form) {
//进行ajax传值
$.ajax({
url : "{:url('/exam1/save')}",
type : "post",
dataType : "json",
data: {
user: $("#username").val(),
password: $("#password").val()
},
success : function(msg) {
//要执行的代码
console.log(msg)
}
});
} }) </script>

控制器:

public function save(Request $request)
{
//
$data=$request->post();
return json(['code'=>200,'message'=>'sucess','data'=>$data]);
}

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. Redis哨兵模式高可用解决方案

    一.序言 Redis高可用有两种模式:哨兵模式和集群模式,本文基于哨兵模式搭建一主两从三哨兵Redis高可用服务. 1.目标与收获 一主两从三哨兵Redis服务,基本能够满足中小型项目的高可用要求,使 ...

  2. Jvm和CPU保证特定情况下不乱序

    简介 CPU为了提高指令执行效率,会在一条指令执行过程中(比去内存读数据(慢100倍)),去同时执行另一条指令,前提是,两条指令没有依赖关系. CPU保证不乱序 MESI--CPU缓存一致性协议(In ...

  3. Spring与Struts2整合时action自动注入的问题

    当Struts和Spring框架进行整合时,原本由action实例化对象的过程移交给spring来做(这个过程依赖一个叫struts2-spring-plugin的jar包,这个包主要的功能就是实现刚 ...

  4. 利用LNMP实现wordpress站点搭建

    一.部署MySQL 1.1 二进制安装mysql5.6 # 准备用户,依赖包,二进制程序 [root@nginx ~]# yum install -y libaio perl-Data-Dumper ...

  5. GitHub page创建

      这是我的博客,才刚刚建成请多多指教 https://henryztong.github.io/ 以下地址都是关于创建GitHub 博客的: 地址 说明 https://pages.github.c ...

  6. puppeteerExamples

    What can I do? Most things that you can do manually in the browser can be done using Puppeteer! Here ...

  7. 6、前端--DOM操作(查找标签、节点操作、获取值操作、class操作、样式操作、绑定事件、内置参数this)

    DOM操作之查找标签 前缀关键字>>>:document # 基本查找(核心) document.getElementById 根据ID获取一个标签 document.getElem ...

  8. python数据类型内置方法

    内容概要 列表内置方法 字典内置方法 字符串转换成字典的方法 eval() 元组内置方法 元组相关笔试题 集合内置方法 列表内置方法 l1 = [2, 4, 5, 7, 3, 9, 0, 6] # 升 ...

  9. erange.heetian.com 回显任意账号

      首先获取你想登录ID的REG标识符,例如合天课程专家  获取标识符ba84d3c3-a4a1-4cd2-a00d-2f5722ee86a2 一般用户前缀为REG,这个肯定是管理员之类的= =.. ...

  10. Java在算法题中的输入问题

    Java在算法题中的输入问题 在写算法题的时候,经常因为数据的输入问题而导致卡壳,其中最常见的就是数据输入无法结束. 1.给定范围,确定输入几个数据 直接使用普通的Scanner输入数据范围,然后使用 ...