jQ Validate插件进行表单验证

正常form表单验证

1.写入form表单这样写

 <meta name="csrf-token" content="{{csrf_token()}}">
 <form id = "projectForm">
        <input name='title' type="text" class="form-control _input" placeholder="请输入项目标题">
        <textarea name='content' class="form-control _input" rows="4" placeholder="请输入项目简介"></textarea>
        <input   name = "image"/>
        <input  name = "file"/>
</form>

2.在本页面引入jq以及jquery.validate

<script type="text/javascript" src="{{url('/qiniu/js/jquery.js')}}"></script>
<script src="{{asset('admin/js/jquery.validate.min.js')}}"></script>

3.初始化表单验证

刚才写的表单中有几个点是有用的，form的id，用于实例化，input 的name，是验证工具获取需要验证的字段的依据，最后一定要有type = submit，这是提交表单以及验证的触发器。

    !(function ($) {
    "use strict";//使用严格标准
    // 获取表单元素
    var FormValidator = function(){
        this.$projectForm = $("#projectForm");
    };
    // 初始化
    FormValidator.prototype.init = function() {
        this.$projectForm.validate({
            // 验证规则
            rules: {
                title: {
                    required: true
                },
                content: {
                    required: true
                },
                image: {
                    required: true
                },
                file: {
                    required: true
                }
            },
            // 提示信息
            messages: {
                title: {
                    required: '必须要填写标题哦'
                },
                content: {
                    required: '必须要填写项目简介哦'
                },
                image: {
                    required: '必须要上传一张图片哦'
                },
                file: {
                    required: '必须要上传一份项目文件哦'
                }
            },
            ignore:  ' '   //  注意！注意！ 加上这句，能给隐藏字段做验证！
        });
    };
    $.FormValidator = new FormValidator;
    $.FormValidator.Constructor = FormValidator;
})(window.jQuery),
        function($){
            "use strict";
            $.FormValidator.init();
        }(window.jQuery);

ajax提交表单验证(兄弟会尹茂林)

1.上面的原则同样适用，只是要多加一些东西。

 !function($) {
    "use strict";
    var FormValidator = function() {
      //实例化验证工具
        this.$projectForm = $("#projectForm");
    };
    FormValidator.prototype.init = function() {
    //比起正常表单，多出了这一步，ajax写到这里面
        $.validator.setDefaults({
            submitHandler: function() {
                $.ajaxSetup({
                    //将laravel的csrftoken加入请求头，所以页面中应该有meta标签，详细写法在上面的form表单部分
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    }
                });
                //与正常form不同，通过下面这样来获取需要验证的字段
                var data = new FormData();
                data.append( "title"      , $('input[name=title]').val());
                data.append( "content"     , $('input[name=content]').val());
                data.append( "image"       , $('input[name=image]').val());
                data.append( "file"     , $('input[name=file]').val());
              //开始正常的ajax
                $.ajax({
                    url:'/project',
                    type:'post',
                    data:{
                        title:$("input[name='title']").val(),
                        content:$("textarea[name='content']").val(),
                        image:$("input[name='image']").val(),
                        file:$("input[name='file']").val(),
                        _token:$("#_token").val()
                    },
                    success:function(data){
                        alert('添加成功');
                    },
                    error:function(){
                        alert('添加失败');
                    }
                })
            }
        });
        // validate signup form on keyup and submit
        this.$projectForm.validate({
            // 验证规则
            rules: {
                title: {
                    required: true
                },
                content: {
                    required: true
                },
                image: {
                    required: true
                },
                file: {
                    required: true
                }
            },
            // 提示信息
            messages: {
                title: {
                    required: '必须要填写标题哦'
                },
                content: {
                    required: '必须要填写项目简介哦'
                },
                image: {
                    required: '必须要上传一张图片哦'
                },
                file: {
                    required: '必须要上传一份项目文件哦'
                }
            }，
          ignore: ' '   //  注意！注意！ 加上这句，能给隐藏字段做验证！
        });

    },
            //init
            $.FormValidator = new FormValidator,
            $.FormValidator.Constructor = FormValidator
}(window.jQuery),

        function($) {
            "use strict";
            $.FormValidator.init()
        }(window.jQuery);

这样写完之后，点击submit提交的时候如果验证不通过，无论是表单还是ajax，都不会提交请求，而且表单验证默认还有失焦验证。

小demo

  /**
 * 昵称修改
 */

!(function ($) {
    "use strict";
    var FormValidator = function(){
        this.$projectForm = $("#nickname-form");
    };
    FormValidator.prototype.init = function() {
        $.validator.setDefaults({
            submitHandler: function() {
                var data = new FormData();
                var nickname = $('#nickname-form').find('input[name=nickname]').val();
                data.append( "nickname", nickname);
                //开始正常的ajax
                    $.ajax({
                    url:'/api/user/nickname',
                    type:'post',
                    data:{
                        nickname:nickname,
                        _token:$('meta[name=csrf-token]').attr('content')
                    },
                    success:function(data){
                        console.log(data);
                        if (data.ServerNo===200) {
                            // 成功将input默认框改为data.ResultData 并弹出提示框 2秒后隐藏
                            $('#nickname-form').find('.info-alert').removeClass('error-    alert').addClass('success-alert').html('操作成功').show();
                            $('#nickname-    form').find('input[name=nickname]').attr('placeholder',data.ResultData);
                            setTimeout(function(){
                                $('#nickname-form').find('.info-alert').hide();
                            },2000)
                        } else {
                            $('#nickname-form').find('.info-alert').removeClass('success-    alert').addClass('error-alert').html('操作失败').show();
                        }
                    },
                    error:function(){
                        $('#nickname-form').find('.alert-info').removeClass('success-    alert').addClass('error-alert').html('操作失败').show();
                    }
                })
            }
        });
        this.$projectForm.validate({
            // 验证规则
            rules: {
                nickname: {
                    required: true,
                }
            },
            // 提示信息
            messages: {
                nickname: {
                    required: '昵称不能为空哦'
                }
            }
        });
    };
    $.FormValidator = new FormValidator;
    $.FormValidator.Constructor = FormValidator;
})(window.jQuery),
    function($){
        "use strict";
        $.FormValidator.init();
    }(window.jQuery);

自定义验证规则

/**
 * 为jq Validate添加密码格式验证
 */
var pswReg = /^(?![^a-zA-Z]+$)(?!\D+$).{6,}$/;
$.validator.addMethod("mix",function(value,element,params){
    if (pswReg.test(value)) {
        return true
    } else {
        return false;
    }
},"必须6位以上，并包含字母和数字哦");

验证中这样写

password: {
                required: true,
                minlength: 6,
                mix:true
            },