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

Question

123可以打出来，但是函数里面的内容就打不出来，不知道为什么

Answer 1

之前找到原因了，原因是 所有的prop一定必须要写在<el-form-item>上面，写在里面的input上或者其他任何地方都不行

Answer 2

Python后端，最近正在用element ui;
首先确保每个验证函数一定调用了callback()函数，在验证不通过、通过时都要调用callback()函数，这里return callback()与callback()都可以；
如果还是有问题，再打印this.$refs[formName]如果为空说明调用或表单有问题。

<script>
    import ElCol from "element-ui/packages/col/src/col";

    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();
            }
        }
    }
</script>

Answer 3

检查自定义验证里面，是否使用if elseif 而忽略了最后的else中的callback

Answer 4

vue element-ui使用自定义正则表达式：

let validatePass = (rule, value, callback) => {
     let regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
     if (value === '') {
        callback(new Error('请输入密码'))
     } else if (regExp.test(value) === false) {
       callback(new Error('8-16字母和数字组成，不能是纯数字或纯英文'))
     } else {
        if (this.ruleForm.repass !== '') {
          this.$refs.ruleForm.validateField('repass')
        }
          callback()
     }
}

注册提交按钮事件：

submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let _this = this
            this.$ajax.post('请求地址', _this.ruleForm)
              .then((response) => {
                this.$message.success('注册成功！')
                this.$refs[formName].resetFields()
                //  跳转到登录页
                this.$router.push({path: '/'})
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
}

全套完整代码：[vuejs+element ui+ssm+maven实现登陆注册功能（有完整源码下载）

Answer 5

你这个,先看看this.$refs[formName]是不是Undefined

Answer 6

我的编辑和新建是同一个弹窗的el-from,刚开始单纯写新建时，没发现问题，加了编辑以后，就有bug了，
bug1:
复现步骤：
1.点击编辑，弹窗显示，内容回显，关闭弹窗
2.点击新建，弹窗显示，显示的是刚刚编辑的内容
bug2:偶尔复现的
点击新建 表单都填写了，点保存按钮，this.$refs[formName].validate((valid) => {可以进来，到那时偏偏valid是false, 第一次进来新建是好的，然后不知道怎么就一直新建不好了，为什么一直是false呢

以下都写了
el-form rules，model属性绑定，ref标识
el-form-item prop属性绑定