使用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()
来自一个vue初学者 ↩︎