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

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;
      }
   }