It seems like you might be able to improve the validation by simply adding
&& user.password.length>8
or utilizing vuelidate to incorporate 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();
}
})
You can maintain your code structure in this manner.