Question

我目前正在使用HTML5约束验证。

考虑到这个简单的形式：

<form action="/" method="post">
    <input type="text" name="comeGetSome" value="" required="required" maxlength="10" /><br />      
    <input type="submit" value="Send me" />
</form>

请参阅https://www.w3schools.com/code/tryit.asp?filename=FN6R3PLQ7A3D

只要给出comeGetSome的值，就不会提交。

但是，当将值设置为超过10个字符时，表单将提交正常。

<form action="/" method="post">
    <input type="text" name="comeGetSome" value="This is way too long" required="required" maxlength="10" /><br />      
    <input type="submit" value="Send me" />
</form>

请参阅https://www.w3schools.com/code/tryit.asp?filename=FN6R4H30WQI2

当我需要编辑某些内容并且字段必须预先填充数据时可能会失败（因为要求已更改），就会出现问题。它不应该允许用户提交数据（即使之前存储为有效数据），直到数据更改为有效。

为什么处理required验证，但maxlength不是？有没有已知的解决方法？

Answer 1

maxlength似乎只有在对<input>元素的内容进行了一些更改后才能工作。您还可以使用pattern来定义<input>的最大长度：

＆＃13;

<form action="/" method="post">
    <input type="text" name="comeGetSome" value="This is way too long" required="required" pattern=".{1,10}" /><br />      
    <input type="submit" value="Send me" />
</form>

＆＃13;

仅在更改属性值时才评估约束   来源： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-maxlength

约束验证：如果元素具有允许的最大值长度，则其脏值标志为true，其值最后由用户编辑更改（而不是脚本所做的更改），并且元素的API值的JavaScript字符串长度大于元素的最大允许值长度，然后该元素太长了。
  来源： https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-maxlength

预填充数据时，HTML5约束验证失败

1 个答案: