number类型input的minlength属性未生效，该属性作用是什么？

哦，这个坑我之前踩过！你遇到的问题核心在于：minlength属性只对文本类输入类型生效，而你用的是type="number"的输入框，这类输入框并不受minlength的约束，所以输入"11"（长度仅2位）时表单能直接提交，不会触发错误提示。

minlength的具体作用 #

minlength的本质是限制用户输入的文本内容的最小字符长度——它只针对那些输入内容会被当作字符串处理的输入类型，比如：

• type="text"
• type="email"
• type="password"
• type="tel"
• type="search"

当使用这些类型的输入框时，只要用户输入的字符数小于minlength指定的值，浏览器在表单提交时就会自动弹出错误提示，阻止表单提交。

实现传真号码长度验证的解决方案 #

如果想让传真号码必须至少10位，有两种简单的解决办法：

方法1：改用type="tel"输入框 #

type="tel"属于文本类输入类型，完全支持minlength属性，而且专门用于电话号码/传真号码输入，体验更贴合场景：

<form>
  Fax #: <input type="tel" name="fax" minlength="10" required />
  <button>Print</button>
</form>

这样输入长度不足10位时，点击提交就会触发浏览器自带的错误提示了。

方法2：用pattern属性配合type="number" #

如果一定要保留type="number"，可以用正则表达式的pattern属性来限制位数，同时加上title属性让错误提示更友好：

<form>
  Fax #: <input type="number" name="fax" pattern="\d{10,}" required title="传真号码至少需要10位数字" />
  <button>Print</button>
</form>

这里的\d{10,}表示匹配至少10位数字，提交时浏览器会验证输入内容是否符合这个规则，不符合就会弹出你设置的提示文本。

内容的提问来源于stack exchange，提问作者neubert