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]);
}

 

posted @ 2022-02-22 21:15  王越666  阅读(99)  评论(0)  编辑  收藏  举报