[Vuejs]-Based on length how to check values in Vuejs?

by

0👍

✅

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

Leave a comment