使用jquery.validate.js 的小坑一个

使用jquery.validate.js 的小坑一个

我是使用vue.js来集成这个jquery.validate.js，我想把所有的方法都统一到vue的methods 里面.
表单验证的方法和数据提交的方法分开，那我数据提交前就想做个表单是否校验成功的校验，遇到了一个小问题，换了方法后解决
官网上提供了两个方法来表示验证是否成功，返回值都是boolean类型
vaild()
form()

这两者用法是有区别的 ,官网截图:

这两种方法都不需要参数，调用方式有区别而已
我在使用这个vaild()出现了一个问题，
’Cannot read property ‘element’ of undefined？'
然后我换成了 form()后 ,问题解决

我的报错代码：

   					$("#formdemo").validate({
                        rules: {
                            name: {
                                required: true,
                                maxlength: 5,
                                minlength: 2
                            },
                            password: {
                                required: true,
                                number: true,
                                maxlength: 6,
                                minlength: 6
                            },
                            rePassword: {
                                required: true,
                                number: true,
                                maxlength: 6,
                                minlength: 6,
                                equalTo: "#password"
                            }
                        },
                        messages: {
                            name: {
                                required: "*必填",
                                maxlength: "*2-5个字符，汉字可以两个",
                                minlength: "*2-5个字符，汉字可以两个"
                            },
                            password: {
                                required: "*必填",
                                number: "*必须是合法的数字，长度6位",
                                maxlength: "*必须是合法的数字，长度6位",
                                minlength: "*必须是合法的数字，长度6位"
                            },
                            rePassword: {
                                required: "*必填",
                                number: "*必须是合法的数字，长度6位",
                                maxlength: "*必须是合法的数字，长度6位",
                                minlength: "*必须是合法的数字，长度6位",
                                equalTo: "两次密码不一致"
                            }
                        }
                    });

					if(!$("#formdemo").valid()){//此行报错
                        return;
                    }

我的不报错代码：

			var val = $("#formdemo").validate({
                        rules: {
                            name: {
                                required: true, 
                                maxlength: 5,
                                minlength: 2
                            },
                            password: {
                                required: true,
                                number: true,
                                maxlength: 6,
                                minlength: 6
                            },
                            rePassword: {
                                required: true,
                                number: true,
                                maxlength: 6,
                                minlength: 6,
                                equalTo: "#password"
                            }
                        },
                        messages: {
                            name: {
                                required: "*必填",
                                maxlength: "*2-5个字符，汉字可以两个",
                                minlength: "*2-5个字符，汉字可以两个"
                            },
                            password: {
                                required: "*必填",
                                number: "*必须是合法的数字，长度6位",
                                maxlength: "*必须是合法的数字，长度6位",
                                minlength: "*必须是合法的数字，长度6位"
                            },
                            rePassword: {
                                required: "*必填",
                                number: "*必须是合法的数字，长度6位",
                                maxlength: "*必须是合法的数字，长度6位",
                                minlength: "*必须是合法的数字，长度6位",
                                equalTo: "两次密码不一致"
                            }
                        }
                    });

                    if(!val.form()){
                        return;
                    }

我这边两段代码主要的区别就是否给 $("#formdemo").validate({…}) 定义了引用 ，用这个引用来调用form()还是直接 $("#formdemo").valid()

¹

---

1. 来自一个vue初学者 ↩︎