Question

考虑以下形式：

＆＃13;

<form>
  <input type="text" minlength="5" value="1234">
  <button type="submit">submit</button>
</form>

＆＃13;

当我单击提交按钮而不更改任何内容时，最小长度验证不起作用且表单成功提交。

但在更改输入值后，例如1234 -> 12345 -> 1234，验证工作正常，表单未提交。

为什么？

Answer 1

这是设计的。 minlength属性仅在用户编辑字段后对其进行验证。如果字段的值未更改，则不验证该字段，即使该值不符合约束。来自spec（强调我的）：

约束验证：如果元素具有最小允许值长度，其脏值标志为真，则其值最后由用户编辑更改（而不是由脚本进行的更改），其值不是空字符串，并且元素的API值的JavaScript字符串长度小于元素的最小允许值长度，然后该元素太短。

如果您需要验证值，无论用户是否已编辑该字段，请参阅Racil Hilan的答案（尽管他们关于minlength属性在任何地方都不受支持的陈述并不意味着什么，并且在很大程度上无关紧要 - 如图所示，这显然是设计的;如果有的话，它表明做支持该属性的浏览器支持完全）。

Answer 2

并非所有浏览器都支持minlength属性。您可以改用pattern属性。还需要required属性，否则将从验证中排除具有空值的输入字段。

试试这个：

＆＃13;

<form>
  <input type="text" pattern=".{5,}" required value="1234">
  <button type="submit">submit</button>
</form>

＆＃13;

使用pattern属性带来的额外好处是它可以验证初始值，因此您不会遇到minlength属性所没有的问题。验证初始值（详见BoltClock答案）。不过，缺点是验证信息并不那么优雅。例如，Chrome中的消息是＆＃34;请匹配请求的格式＆＃34;对于pattern和＆＃34;请将此文本延长为5个字符或更多字符＆＃34; minlength。

Answer 3

您可以使用占位符=“1234”代替 value =“1234 ”，并且不要忘记将“ required ”放入你的输入字段。

之后就可以了

<form role="form">
  <input type="text" name="number" minlength="5" placeholder="1234" required>
  <button type="submit">submit</button>
</form>

为什么不输入minlength检查工作的初始值？

3 个答案: