利用jq插件进行form表单前台验证：FormValidator

手册：http://shouce.jb51.net/phpcms/PHPCMS/formvalidator.html
菜鸟教程：http://www.runoob.com/jquery/jquery-plugin-validate.html

1.将要验证的表单放在一个form表单中，form表单只需加id和onsubmit="return false"属性

加onsubmit属性是为了阻止form自动跳转

2.一言不合上代码

 !function($) {
            "use strict";
            var FormValidator = function() {
                this.$signupForm = $("#yz_xg");
            };

            //初始化
            FormValidator.prototype.init = function() {
                //插件验证完成执行操作 可以不写
                ....
                //验证要求
                this.$signupForm.validate({
                    rules: {
                        title: {
                            required: true,
                        },
                        brief:{
                            required: true
                        },
                        describe:{
                            required: true,
                        },
                        banner:{
                            required: true,
                        }
                    },
                    //提示信息
                    messages: {
                        title: {
                            required: '请输入主题'
                        },
                        describe:{
                            required: '请输入详情'
                        },
                        banner:{
                            required: '缩略图不能为空'
                        }
                    }
                });

            },
                    //init
                    $.FormValidator = new FormValidator,
                    $.FormValidator.Constructor = FormValidator
        }(window.jQuery),
                function($) {
                    "use strict";
                    $.FormValidator.init()
                }(window.jQuery);

如还有不懂的，可以去看看我同事的这一个简书

http://www.jianshu.com/p/5c0990e39b04