html css 有效性在 maxlength 上失败答案

【问题标题】：html css validity fails on maxlengthhtml css 有效性在 maxlength 上失败
【发布时间】：2020-03-07 18:33:44
【问题描述】：

我在玩这个https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#Validation 他们在页面初始加载时提交表单之前验证必需输入值。

我怎样才能做完全相同的事情，但输入值的 maxlength 的初始数据应该无效？ p>

。 CSS

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 130px;
}

input:invalid+span:after {
  position: absolute; content: '✖';
  padding-left: 5px;
  background:red;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

html

<form novalidate>
  <div>
    <label for="uname">Has No Value: </label>
    <input type="text" id="name1" value='' name="name1" required>
        <span class="validity"></span>
  </div>


  <div>

<label for="uname">Has Value: </label>
    <input type="text" id="name2" value='hello' name="name2" required>
        <span class="validity"></span>
  </div>


  <div>
<label for="uname">Value is too long: </label>
    <input type="text" id="uname3" value='abcdefghijk' name="name3" 
    maxlength=5>
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

【问题讨论】：

标签： html css forms validation

【解决方案1】：

您还可以使用pattern 属性。 pattern 属性检查输入的值是否满足 RegExp 中规定的条件。

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 130px;
}

input:invalid+span:after {
  position: absolute; content: '✖';
  padding-left: 5px;
  background:red;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

<!--
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
-->

<form novalidate>
  <div>
    <label for="uname">Has No Value: </label>
    <input type="text" id="name1" value='' name="name1" required>
        <span class="validity"></span>
  </div>


  <div>

<label for="uname">Has Value: </label>
    <input type="text" id="name2" value='hello' name="name2" required>
        <span class="validity"></span>
  </div>


  <div>
<label for="uname">Value is too long: </label>
    <input type="text" id="uname3" value='abcdefghijk' name="name3" 
    pattern='.{0,6}' maxlength='6'>
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

【讨论】：