基于长度如何检查 Vuejs 中的值？

Question

 <button type="submit"
    :disabled=" (user.password && !$v.user.password.valid) ||
                (user.confirmPassword && !$v.user.confirmPassword.sameAsPassword)">sda </button>

我需要禁用长度，直到用户在两个字段中输入相同的字符。我需要检查两个字段值。

我可以使用长度来做到这一点吗？？如果是，我如何检查上面的代码。

问题是目前它只检查，如果输入的密码与确认密码字段中的第一个字符匹配，它正在继续。

Answer 1

我不知道我是否理解正确，但我认为您可以简单地添加 && user.password.length>8 或者因为您使用的是 vuelidate 您可以添加此验证： https://codepen.io/sibellek/pen/oNBPVbN

 <div id="app">
 <input
                      v-model="user.confirmPassword"
                      id="confirmPassword"
                      name="confirmPassword"
                      placeholder="Confirm password"
                      autocomplete="off"
                      :disabled="user.password.length < 8"
        @change="disabledSubmit"
                    />
                    
                    
<div
                      class="error-messages-pass"
                    >
                    
<input
                      v-model="user.password"
                      id="password"
                      name="password"
                      value=""
                      placeholder="Enter new password"
                      autocomplete="off"
       @change="disabledSubmit"
                    />
</div>
  <button type="submit"
    :disabled="disableButton">sda </button>
</div>


new Vue({
  el: "#app",
  data: {
    user: {
      password: "",
      confirmPassword: "",
      },
    disableButton: false,
  },
  validations: {

    user: {
      password: {
        valid: function (value) {
          const containsUppercase = /[A-Z]/.test(value)
          const containsLowercase = /[a-z]/.test(value)
          const containsNumber = /[0-9]/.test(value)
          const containsSpecial = /[#?!@$%^&*-]/.test(value)
          return containsUppercase && containsLowercase && containsNumber && containsSpecial
        },
        required, minLength: minLength(8), maxLength: maxLength(20)
      },
      confirmPassword: { required, sameAsPassword: (value, vm) =>
        value === vm.password.substring(0, value.length) },
    },
    },
  methods: {
  disabledSubmit() {
   this.$v.user.$touch();
   this.disableButton = this.user.password.length<8 || 
 this.$v.user.password.$error || this.user.password!==this.user.confirmPassword;
    }
  },
  mounted() {
    this.disabledSubmit();
  }
})

这样您就可以保持代码不变

基于长度如何检查 Vuejs 中的值？

Based on length how to check values in Vuejs?

javascript

vue.js

vuelidate