<!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. AT2348 [ARC070D] HonestOrUnkind

    不妨先从无解的情况下手,不难发现当 \(A \le B\) 时是一定无解的. 因为不诚实的 \(B\) 个人可以装作是诚实的,全部说自己这一方是诚实的对方是不诚实的我们就无法判断了. 下面我们就可以在 ...

  2. PriorityQueue的用法和底层实现原理

    定义 PriorityQueue类在Java1.5中引入并作为 Java Collections Framework 的一部分.PriorityQueue是基于优先堆的一个无界队列,这个优先队列中的元 ...

  3. pageX的兼容性处理2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. HTML页元素自适应+居中总结（不定期补充）

    感谢大佬:https://www.cnblogs.com/SallyShan/p/11480685.html 图片自适应 背景图片自适应 /*背景页*/ #page_content{ width: 1 ...

  5. JS字符串去替换元素再转换成数组

    原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11648074.html JS字符串替换不必要的元素, 然后去除多余的空格, 转换成数组: va ...

  6. CABasicAnimation动画

    使用CABasicAnimation动画: CALayer *znzLayer; = [[CALayer alloc]init]; //创建不断该表CALayer的transform属性动画 CABa ...

  7. Vue小白练级之路---001表单验证功能的一般实现思路

    思路: 先各自验证 非空校验 具体规则校验 后兜底校验( 防止用户没输入信息直接登录 ) 实现:( 以 element-ui 为例 ) 在 标签上用 model 动态绑定收集数据的对象(form) 在 ...

  8. 反射（reflection），通过反射创建对象

    简单尝试: import java.lang.reflect.InvocationTargetException; import java.lang.reflect.Method; public cl ...

  9. Spark——统计文本中单词出现的次数

    示例一:统计所有单词出现的次数 1.在本地创建文件并上传到hdfs中 #vin data.txt //将文件上传到hadoop的根目录下 #hdfs dfs -put data.txt / 2.在sp ...

  10. java程序出现oom如何解决？什么场景下会出现oom？

    1.什么是oom? OOM,全称"Out Of Memory",翻译成中文就是"内存用完了",来源于java.lang.OutOfMemoryError. 当J ...