Question

   isMobile(e) {
      let char = String.fromCharCode(e.keyCode); // Get the character
      if (/^[0-9]+$/.test(char)) return true;
      // Match with regex
      else e.preventDefault(); // If not match, don't add to input text
      
    },

export default {
  name: "HelloWworld",

  data: function () {
    return {
      mobdis: false,
      mobile: "",
      maxmobile: 10,
    };
  },

  validations: {
    computed: {
      isDisabled: function () {
        return !this.mobdis;
      },
    },
  },

<input
  class="input-section label-set"
  style="padding-left: 75px"
  type="text"
  id="mobdis"
  v-model="mobdis"
  v-model.trim="$v.mobile.$model"
  :class="{ 'is-invalid': validationStatus($v.mobile) }"
  placeholder="Enter registerd mobile number"
  :maxlength="maxmobile"
  v-on:keypress="isMobile($event)"
/>
<div v-if="!$v.mobile.minLength" class="invalid-feedback">
  Kindly check phone
  {{ $v.mobile.$params.maxLength.min }} number.
</div>
  
<button
  class="sendotp-button"
  :disabled="isDisabled"
  v-on:click="isHidden = true"
>
  SEND
</button>

如何在 Vuejs 中设置按钮的 Maxlength 条件？

禁用按钮工作正常，但最大长度条件不满足，即使我尝试输入 1 位数，按钮正在启用..

还添加了正则表达式代码。

Answer 1

尝试使用 js 验证 mobdis

像这样：

export default {
  name: "HelloWworld",

  data: function () {
    return {
      mobdis: false,
      mobile: "",
      maxmobile: 10,
    };
  },

  methods: {
    isMobile(event) {
      /* other codes */
      this.$nextTick(function () {
        if (event.value.length > 9) {
          // check if this field (number) has value lenght 10
          this.mobdis = true;
        } else {
          this.mobdis = false;
        }
      });
      /* other codes */
    },
  },

  /* validations: {
    computed: {
      isDisabled: function () {
        return !this.mobdis;
      },
    },
  }, */
};

如何在Vuejs中禁用按钮直到条件满足？

1 个答案: