Based on length how to check values in Vuejs?

Question

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

With length i need to disable, untill user enterd equal characters in both fields. i need to check both field values.

Can i do this by using length?? if yes how can i check with above code.

Issue is at present it is checking only for, If entered password is matched with first character in confirm password field, it is proceeding.

Answer 1

I don't know if i understood correctly but i think you can simply add && user.password.length>8 or since you are using vuelidate you can add this validation: 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();
  }
})

and that way you can keep your code the same way