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

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

阅读 50.2k
6 个回答

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

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>

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

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实现登陆注册功能(有完整源码下载)

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏