广州网站建设 全包,怎么给wordpress加rss,被传媒公司骗了钱怎么办,昆山自适应网站建设ElementUI中为什么使用this.$refs.form.validate验证成功却直接跳过 问题背景 在写一个Vue练手项目时#xff0c;我使用rulse对表单中用户输入的数据进行校验#xff0c;但莫名奇妙就发现#xff1a;当我点击提交表单时#xff0c;表单中的数据都验证成功了#xff0c;但是…ElementUI中为什么使用this.$refs.form.validate验证成功却直接跳过 问题背景 在写一个Vue练手项目时我使用rulse对表单中用户输入的数据进行校验但莫名奇妙就发现当我点击提交表单时表单中的数据都验证成功了但是却发现没有任何反应经过debug发现程序在运行到this.$refs.form.validate((valid) {})这一行时直接就跳过了(○´д) 直接蒙圈了 问题复现 data() {return {rules: { // 设置表单校验规则name: [ // 姓名判断{ required: true, message: 姓名不能为空 }],age: [ // 年龄判断{ required: true, message: 年龄不能为空 },{ type: integer, message: 年龄不合法 },{validator(rule, value, callback) {if (!(0 value value 200)) {return callback(new Error(年龄不合法))} /* else {return callback()} */}}],sex: [// 性别判断{ required: true, message: 性别不能为空 },],birthday: [ // 出生日期判断{ required: true, message: 日期不能为空 }],address: [// 地址判断{ required: true, message: 地址不能为空 }]}}},methods: {// 新增窗口提交表单按钮submit() {debugger // 问题就出现再下一行// 提交前先校验表单this.$refs.form.validate((valid) {console.log(valid)if (valid) {// 表单校验成功进行后续的逻辑处理// 清空表单this.$refs.form.resetFields()// 隐藏新增弹窗this.dialogVisible false}})}}问题分析 经过“上网搜索”查看ElementUI官网最终确定了问题的罪魁祸首是validator当我们在使用rules校验表单时并且使用了validator后此时我们在调用this.$refs.form.validate((valid) {}后并不会直接走箭头函数中的逻辑而是直接走validator函数而在走validator时它会先寻找该函数中的callback()回调函数如果没有找到该回调函数就会直接跳过箭头函数中的逻辑 解决方案 查看rulse中所有的validator函数然后补齐未添加上的callback()函数 参考文章 https://blog.csdn.net/weixin_43592750/article/details/113617251https://www.jianshu.com/p/b150eac5ea2e
