javascript - jqBootstrapValidation 中的多重验证失败

Question

我正在使用 meteor 和 jade-handlebars 包。还使用 coffeescript 作为 JavaScript。现在我正在使用 jqBootstrapValidation 来验证我的表单。我需要验证我的电话号码，用户只能输入 10 位数字的整数。所以我在我的 Jade 文件中做了以下操作(这只是我文件的一部分)

.control-group
   label.control-label Phone Number
     .controls
       input(type='number',required='required',maxlength="10")

仅对数字进行验证有效，但 10 位数字的最大长度无效，而且数字字段适用于 chrome，不适用于 firefox。请大家帮帮我。预先感谢您。!!!

Answer 1

maxlength 属性仅适用于文本输入，不适用于数字输入。

对于十位数字的电话号码，您需要更多的验证，而不仅仅是十个字符的数字，因为有效的数字可以包含 +-. 并以零开头。请改用带有 pattern 属性中定义的正则表达式的文本字段。下面是一个需要十个数字的示例:

<input type="text" pattern="^[0-9]{10}$" data-validation-pattern-message="10 digits needed">

实际上，您的用户可能希望能够输入更复杂的电话号码，例如 +44 (0)7772 123 456 或 1800-555-678。 this SO question 中列出了一些更强大的正则表达式。