如何验证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 != ''，那么这两条消息都以emtpy和无效编号显示

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