html - html css 有效性在 maxlength 上失败

Question

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

我怎样才能做完全相同的事情，但输入值的最大长度具有应该失效的初始数据？

这是我创建的一个 jsFiddle 来查看这个

. 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>

标签： htmlcssformsvalidation

Answer 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>