当不符合模式要求(HTML5)时，文本字段显示错误

Question

我刚开始使用html5编码，所以会有人帮助我解决我的问题。

我正在做一项学校的工作，我需要在html5的文本字段上指定模式，以便只接受6位数和一个字母(例如。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

Answer 2

如果字段无效，就不能只显示警报，因为从技术上讲，字段在满足验证模式之前是无效的。但你可以这样做：

https://jsfiddle.net/Ld5fuz75/2/

​

input ~ .alert {
  display: none;
}
input:invalid ~ .alert {
  display: block;
}

<form>
  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" />

  <span class="alert">Form is invalid</span>
</form>

​