美文网首页
iview的自定义表单校验,valid显示undefined

iview的自定义表单校验,valid显示undefined

作者: 黄金原野 | 来源:发表于2020-05-20 13:27 被阅读0次

    iview自定义表单校验的规则如下

    data () {
        const validatePass = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('Please enter your password'));
        } else {
            if (this.formCustom.passwdCheck !== '') {
                // 对第二个密码框单独验证
                this.$refs.formCustom.validateField('passwdCheck');
            }
            callback();
        }
    };
    return {
      // 再写对应的数据
    }
    }
    

    其实上面的内容不是重点,iview官网上就可以搜到教程。重点在于在校验的定义中,只能包含校验的内容,而不要只去做form中对应值的判断。例如

    const validatePass = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('Please enter your password'));
        } else if (value.length == 10) {
          // 随便举例一个参数
           this.pwdLength = 10
        } else {
         callback();
      }
    }
    

    这里的pwdLength只是随便举一个例子,在这一个if的分支语句中,只是一个简单的赋值,并未牵涉到校验的内容。看似无伤大雅,然而却在后续的整个表单的校验使得valid的值为undefined,表单校验始终无法通过。

    this.$refs[name].validate(valid => {
      // undefined
      console.log(valid)
    })
    

    解决办法有二:

    • 在校验中删除没有callback的if分支,在其它位置进行必要的数据处理
    • 在if语句中添加callback()

    相关文章

      网友评论

          本文标题:iview的自定义表单校验,valid显示undefined

          本文链接:https://www.haomeiwen.com/subject/twwgohtx.html