利用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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容