css - 不满足模式要求时文本字段显示错误(HTML5)

Question

我是 html5 编码的新手，所以有人可以帮助我解决我的问题。

我正在做一项学校作业，我需要在 html5 的文本字段上指定模式以仅接受 6 位数字和 1 个字母(例如 123456A)。

我设法得到了我想要的，但问题是如何显示错误如果用户输入错误？

我的这个作业必须只用 html5 和 css 来完成。没有任何 Javascript。感谢您的专业知识。

到目前为止，这是我所做的。

<form action="action_page.php">
        Enter Adm No: 
     <input type="text" name="admNo"  pattern="[0-9]{6}[A-Za-z]{1}"
    title="6 digits and 1 letter" required/>
    <input type="submit" />
</form>

Answer 1

你的代码似乎工作正常，但它不会显示任何消息，只是一个红色边框。

只要模式不匹配，您最终可以尝试插入文本，甚至可以隐藏提交输入。

带有伪类 :invalid 的示例和一个额外的标签以允许在所需模式不匹配时插入文本。

/* possible style */

input:invalid {
  color: red;
  /* turn to red as long as pattern do not match */
}
input:invalid+b:before {
  content: 'Invalid Number';/* add text untill patterns matches */
}
input:invalid+b+[type="submit"] {
  display: none; /* hide input submit untill pattern matches */
}

<form action="action_page.php">
  Enter Adm No:
  <input type="text" name="admNo" pattern="[0-9]{6}[A-Za-z]{1}" title="6 digits and 1 letter" required/>
  <b><!-- can be used to insert text via pseudo element where input do not--></b>
  <input type="submit" />
</form>

可以看看https://developer.mozilla.org/en-US/docs/Web/CSS/:valid