VUE表单验证 this.$refs[formName].validate()里面的内容不执行

 export default {
        components: {ElCol},
        data() {
            var checkEmail = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('邮件不能为空'));
                }
                if (!value.includes('@')) {
                    return callback(new Error('请输入正确格式的邮箱'));
                }
                else {
                    return callback() // *一些同学的问题可能就出在这里
                }
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    return callback(new Error('请输入密码'));
                }
                else {
                    return callback()  // ***还有这里,确保每个验证函数都要有
                }
            };
            return {
                loginForm: {
                    email: '',
                    pass: '',
                },
                loginRules: {
                    email: [
                        {validator: checkEmail, trigger: 'blur'}
                    ],
                    pass: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                }
            };
        },
        methods: {
            submitForm(formName) {
                console.log(this.$refs[formName])
                this.$refs[formName].validate((valid) => {
                    console.log(valid)
                    if (!valid) {
                        console.log('error submit!!');
                        return false;
                    } else {
                        console.log('submit')
                        return true
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }

确保每个验证函数一定调用了callback()函数,在验证不通过、通过时都要调用callback()函数,这里return callback()callback()都可以;
如果还是有问题,再打印this.$refs[formName]如果为空说明调用或表单有问题。

转载请说明出处:原文链接 http://www.nbsite.cn/qdjs/217
标签: nodejs VUE

相关阅读:

安装npm包应该放在devDependencies还是dependencies

Angular 禁止生成*.spec.ts测试文件方法

使用 Angular CLI (ng generate)创建组件、服务、类、路由、指令、管道

解决Vue报错—Trailing spaces not allowed