Question

我正在尝试验证输入类型编号。让我们举个例子，我在vuejs中面临什么。

<input type="number" v-model="form.vat_id"/>
<!-- this is an error message for required -->
<p class="error" v-if="form.vat_id == ''">VAT ID is required</p>
<!-- this is an error message for invalid number -->
<p class="error" v-if="Number.isNaN(parseInt(form.vat_id)) && form.vat_id != ''">Please Enter Valid Number</p>

现在，即使form.vat_id的号码无效，它也只显示要求的一条消息。在这里，我测试了vuejs中的无效数字返回空字符串，但输入显示UI中存在无效数字。因此，我无法在此处提供正确的消息。我应该在这里做什么。

如果我在第二条错误消息中删除了&& form.vat_id != ''，则两条消息均显示为空和空号

Answer 1

您可以再加上两个变量。 vatError和vatErrorMsg的默认值分别为false和空字符串。

// In your template

   <input type="text" v-model="form.vat_id" @keyup="checkVatId"/>
   <p class="error" v-if="vatError">{{vatErrorMsg}}</p>

// Now define the method checkVatId

   checkVatId() {
      var vatIdRegex =  // here your vat_id regex.
      if (this.form.vat_id == ''){
        this.vatError = true;
        this.vatErrorMsg = "VAT ID is required.";
      } else if(!vatIdRegex.test(this.form.vat_id)) {
        // Run when user input is not matched with vat id regex.
        this.vatError = true;
        this.vatErrorMsg = "Please Enter Valid Number.";
      } else {
        this.vatError = false;
      }
   }

如何在vuejs中验证输入类型编号-如果输入的编号无效

1 个答案: