<!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. X000100

    P3172 [CQOI2015]选数 gcd 为 \(K\) 不太好办,所以我们先把它转化成 gcd 为 1 的问题: scanf("%d%d%d%d",&n,&k ...

  2. SpringBoot的.gitignore文件使用

    简介 临时文件,编译的中间文件等不要提交到代码仓库,这时就要设置相应的忽略规则,来忽略这些文件的提交.git提供了一个.gitignore,来自动忽略这些配置文件 配置规则 # 表示此为注释,将被Gi ...

  3. RPC和REST的区别

    REST定义 REST是一种架构风格,指的是一组架构约束条件和原则.满足这些约束条件和原则的应用程序或设计就是 RESTful.REST规范把所有内容都视为资源,网络上一切皆资源.REST并没有创造新 ...

  4. resp.getWriter().print(categoryList)、resp.getWriter().write(String)与new ObjectMapper().writeValue(resp.getOutputStream(),categoryList)的区别

    前言:最近在复习原生的servlet的时候,对其输出流不理解,故总结一下: resp.getWriter().print(categoryList) 可以输出字符串,也可以输出对象,可能还有其他类型, ...

  5. Serializable接口中serialVersionUID字段的作用

    序列化运行时使用一个称为 serialVersionUID 的版本号与每个可序列化类相关联,该序列号在反序列化过程中用于验证序列化对象的发送者和接收者是否为该对象加载了与序列化兼容的类. 如果接收者加 ...

  6. IO复习

    /* 字节流 输入字节流: ---------| InputStream 所有输入字节流的基类. 抽象类 ------------| FileInputStream 读取文件的输入字节流 ------ ...

  7. FileOutStream

    import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...

  8. K8是—— yaml资源清单

    K8是-- yaml资源清单 一.yaml文件详解 1.Kubernetes支持YAML和JSON格式管理资源对象2.JSON格式:主要用于api接口之间消息的传递3.YAML格式:用于配置和管理,Y ...

  9. Typora如何上传图片到gitee

    Typora是一款非常好用的Markdown文本编辑器,深受广大程序员的青睐,那么在使用过程中,当我们插入图片的时候,其实是默认放在一个相对路径文件夹下的,这就导致,一旦我们移动文件,或者发送给别人, ...

  10. netty系列之:可以自动通知执行结果的Future,有见过吗？

    目录 简介 JDK异步缘起 netty中的Executor Future的困境和netty的实现 总结 简介 在我的心中,JDK有两个经典版本,第一个就是现在大部分公司都在使用的JDK8,这个版本引入 ...