jQuery Validatede 结合Ajax 表单验证提交
<!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 表单验证提交的更多相关文章
- boostrap ajax表单验证提交
=============================================================================== 1. 1 <link href=& ...
- jquery php ajax 表单验证
本实例用到 JQuery 类库本身的函数和功能,所有表单信息利用 PHPMailer 类库邮件的形式发送. .创建一个表单 html 页面 表单部分 html 代码 以下为引用内容: &l ...
- 表单验证提交——submit与button
之前做东西接触过表单验证提交,但是都是为了完成工作,做完就做完了,没有注过表单验证提交有几种方法,各方法都有啥区别.今天瞎折腾了一下,对他们研究了一下,如下是我个人的理解: submit: 从字面上看 ...
- 第一百五十四节，封装库--JavaScript，表单验证--提交验证
封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...
- 使用Jquery.form.js ajax表单提交插件弹出下载提示框
现象: 使用jquery的from做ajax表单提交的时候,后台处理完毕返回json字符串,此时浏览器提示下载一个json文件而不是在success里面继续解析该json对象. 具体的原因: 浏览器兼 ...
- 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证
一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
- MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框
1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...
- jQuery实现用户注册的表单验证
用户注册的表单往往是需要进行验证的,否则会有一些不否合规则的数据入库,后果会不堪设想,本文通过jquery来实现. <html> <head> <meta chars ...
随机推荐
- C 字符串奇数位小写字母转大写
如题 C实现 #include<stdio.h> #include<string.h> #define COUNT 20 //最大接受字符串数,可以使用动态获取空间函数优化 v ...
- iOS开发笔记，简单实现视频音频的边下边播
总是在网上看别人的博文,受益匪浅,从没自己写过,今天分享一点小经验,第一次写技术博客,希望对同行的ios猿们有所帮助. 先介绍一下自己的情况:一年ios开发,http协议不太懂,大约知道断点下载h ...
- 鸟哥的Linux私房菜学习笔记——文件权限与目录配置
Linux的文件权限和目录配置 在linux中的每个用户必需属于一个组,不能独立于组外.在linux中每个文件有所有者.所在组.其它组的概念. (1)所有者 一般为文件的创建者,谁创建了该文件,就是天 ...
- Solution -「NOI 2020」「洛谷 P6776」超现实树
\(\mathcal{Description}\) Link. 对于非空二叉树 \(T\),定义 \(\operatorname{grow}(T)\) 为所有能通过若干次"替换 \( ...
- Solution -「POI 2014」「洛谷 P5904」HOT-Hotels 加强版
\(\mathcal{Description}\) Link. 给定一棵 \(n\) 个点的树,求无序三元组 \((u,v,w)\) 的个数,满足其中任意两点树上距离相等. \(n\le1 ...
- Solution -「CF 1060F」Shrinking Tree
\(\mathcal{Description}\) Link. 给定一棵 \(n\) 个点的树,反复随机选取一条边,合并其两端两点,新点编号在两端两点等概率选取.问每个点留到最后的概率. ...
- python 2048游戏控制器
2048游戏控制器 1 evaluate 要用程序来处理就得对现实的问题进行量化,用数字来表示.在2048游戏中,我们的输入是一个棋局,让我们输出一个移动方向,这样我们需要对棋局进行量化,即我们要评估 ...
- MyBatis缓存Cache包
Mybatis默认使用了一级缓存为数据查询提供效率,其底层数据结构为PerpetualCache.同时MyBatis不止实现了PerpetualCache,还有其他实现提供其他功能,如下: 可以从UM ...
- 防世界之Web_ics-06
题目: 进入实验环境,发现其他页面啥都没有,题目描述说报表中心数据被删,打开报表中心看看 进入数据中发现url上有?id=1的字样就要注意,敏感起来.id是数值,可以尝试爆破一下. 打开burpsui ...
- 攻防世界之Web_supersqli
题目 本题考查sql注入传送门https://www.cnblogs.com/shacker/p/15917173.html 按照SQL注入一步一步执行 发现有2个列 然后用union select联 ...