为什么在vuelidate中使用sameAs时不起作用?

mfuanj7w  于 2022-12-23  发布在  Vue.js
关注(0)|答案(6)|浏览(182)

未找到要验证sameAs方法的fieldName。
相同(blabla)
blabla = '内部表单数据.密码','内部表单数据.密码.值','此.内部表单数据.密码','此.内部表单数据.密码.值','密码','此.密码','密码.值'

-----------script----------
data () {
  return {
     internalFormData: {
        password: '',
        repassword: ''
      }
   }
},

validations: {
      password: {
        value: {
          required,
          minLength: minLength(8)
        }
      },
      repassword: {
        value: {
          required,
          minLength: minLength(8),
          sameAs: sameAs('internalFormData.password')
        }
      }
    }
  },


---------------template--------------
<error
   v-if="!$v.internalFormData.repassword.value.sameAs"
>
  비밀번호가 일치하지 않습니다.
<error>

错误不会消失。

2exbekwf

2exbekwf1#

您的validations结构应该镜像data中的对象,因此它应该是:

validations: {
  internalFormData: {
    password: {
      required,
      minLength: minLength(8)
    },
    repassword: {
      required,
      minLength: minLength(8),
      sameAs: sameAs('internalFormData.password')
    }
  }
}
vfhzx4xs

vfhzx4xs2#

你需要用一个函数来指出你嵌套的属性,就像这样:

data(){return {
 password :{
  new: '',
  newRepeated:''
 }
}},    
validations : {
 password: {
  new : {required},
  newRepeated : {
   required,
   sameAs : sameAs( function(){return this.password.new} )
  }
 }
}

我还建议您看一下这个已关闭的问题。https://github.com/vuelidate/vuelidate/issues/252

piv4azn7

piv4azn73#

版本3示例:

validations () {
    return {
        admin: { 
            type: {
                required
            },
            email: {
                required,
                email
            },
            password: { 
                required, 
                minLength: minLength(10) 
            },
            confirmPassword: { 
                required, 
                sameAs: sameAs(this.admin.password)
            }
        }
    }
}
5ktev3wc

5ktev3wc4#

替换此行:

sameAs: sameAs('internalFormData.password')

sameAs: sameAs(this.internalFormData.password)

参数不应是字符串,而应是使用“this”的实际属性。我不确定与数据internalFormData不相同的验证是否会影响其工作方式,但我建议您确保它们匹配,以适应如下所示:

validations: {
  internalFormData: {
    password: {
      required,
      minLength: minLength(8)
    },
    repassword: {
      required,
      minLength: minLength(8),
      sameAs: sameAs(this.internalFormData.password)
    }
  }
}
tjvv9vkg

tjvv9vkg5#

使用合成API的简单示例:

import { useVuelidate } from '@vuelidate/core'
import { email, required, sameAs } from '@vuelidate/validators'

const form = {
    email: '',
    confirm_email: '',
}
const rules = {
    email: { required, email },
    confirm_email: { required, sameAs(computed(()=> form.email))) },
}
const v$ = useVuelidate(rules, form)
ahy6op9u

ahy6op9u6#

您必须使用.value

sameAs: sameAs('internalFormData.value.password')

相关问题