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

Posted 2023-02-16

【中文标题】如何验证 vuejs 中的输入类型编号 - 如果输入的编号无效

【英文标题】：How to validate Input type number in vuejs- if input has invalid number

【发布时间】：2019-05-14 08:18:15

【问题描述】：

我正在尝试验证输入类型编号。举个例子，我在 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 != ''，那么两条消息都会在两种情况下都显示 - 空且号码无效

【问题讨论】：

我认为您的代码没有错误。也许问题出在 javascript 中。

输入类型为“数字”我认为没有办法输入非数字字符（没有黑客）。空字符串被视为有效数字，就像 0 一样，因此将显示第一条所需的消息。

如果您确实需要验证增值税号，请考虑使用this component。

您可以使用 v-if 和 v-else-if 并检查输入字段上模糊事件的 vat_id 并根据该事件显示消息。

@PulkitAggarwal 这就是我要说的人...如果我输入任何非数字字符，则 v-model 值将变为空...假设-您在输入框中输入了 123456e 然后 form.vat_id 是给出空字符串..

【参考方案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;
      
   

【讨论】：

谢谢，但是输入类型文本已经完成了 - 现有代码对于输入类型文本工作正常。所以，我正在寻找输入类型编号 - 这对于使用 html5 和 vuejs 都很有用。