Layui结合jQueryValidate实现表单前台验证

一丶js文件 和css文件

<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 src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

二丶:搭建表单样式

  <form class="layui-form" id="commentForm" method="post" action="" >
                  <div class="layui-form-item">
                      <label for="username" class="layui-form-label">
                          <span class="x-red">*</span>账号
                      </label>
                      <div class="layui-input-inline">
                          <input type="text" id="username" name="username"
                          autocomplete="off" class="layui-input">
                      </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="password" class="layui-form-label">
                          <span class="x-red">*</span>密码
                      </label>
                      <div class="layui-input-inline">
                          <input type="password" id="password" name="password"
                          autocomplete="off" class="layui-input">
                      </div>

                  </div>
                  <div class="layui-form-item">
                      <label for="truepassword" class="layui-form-label">
                          <span class="x-red">*</span>确认密码
                      </label>
                      <div class="layui-input-inline">
                          <input type="password" id="truepassword" name="truepassword"
                          autocomplete="off" class="layui-input">
                      </div>
                  </div>

                  <div class="layui-form-item">
                      <label for="L_repass" class="layui-form-label">
                      </label>
                      <button  class="layui-btn" type="submit">
                          提交
                      </button>
                  </div>
              </form>

三丶:编写Layui和jQueryvalidate的js代码

 layui.use(['form', 'layer'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                layer = layui.layer;

                $.validator.setDefaults({
                    submitHandler: function(data) {
                        var username = $('#username').val();
                        var password = $('#password').val();
                        var truepassword = $('#truepassword').val();

                        $.ajax({
                            url:"{:url('userAdd')}",
                            data:{username:username,password:password,truepassword:truepassword},
                            type:'post',
                            success:res=>{


                                if (res.code==200)
                                {
                                    //发异步，把数据提交给php
                                    layer.alert("添加成功", {
                                            icon: 6
                                        },
                                        function() {
                                            //关闭当前frame
                                            xadmin.close();

                                            // 可以对父窗口进行刷新
                                            xadmin.father_reload();
                                        });

                                }

                            }
                        });
                        return false;
                    }
                });


                $().ready(function() {
                    $("#commentForm").validate({
                        rules: {
                            username: {
                                required: true,
                                minlength: 2
                            },
                            password: {
                                required: true,
                                minlength: 5
                            },
                            truepassword: {
                                required: true,
                                minlength: 5,
                                equalTo: "#password"
                            }
                        },
                        messages:{
                            username: {
                                required: "<span style='color: red'>请输入用户名</span>",
                                minlength: "<span></span>用户名必需由两个字符组成</span>"
                            },
                            password: {
                                required: "<span style='color: red'>请输入密码</span>",
                                minlength: "<span style='color: red'>密码长度不能小于 5 个字符</span>"
                            },
                            truepassword: {
                                required: "<span style='color: red'>请确认密码</span>",
                                minlength: "<span style='color: red'>密码长度不能小于 5 个字符</span>",
                                equalTo: "<span style='color: red'>两次密码输入不一致</span>"
                            }
                        }
                    });
                });





            });