时间戳

首页 > 解决方案 > 使用 HTML5 输入模式强制执行有效的主机名

html - 使用 HTML5 输入模式强制执行有效的主机名

问题描述

我正在使用 ESP8266 控制器上的 C++ 项目并显示强制门户。门户本身是由外部库创建的，并且在生成的门户页面方面有所限制。我只能向代码创建的表单字段添加属性。换句话说，我有一个在页面/门户上生成的输入字段，我可以使用 、 、 等属性对其pattern进行min修改max。

我想允许用户输入主机名，并使其非常简单并与可能过时的技术兼容，我想强制主机名以字母字符开头，必须介于 3 到 24 个字符之间，可以包含字母数字字符和/ 或连字符，并且不能以连字符结尾。

显然，pattern属性就是这里的东西。问题是到目前为止我还没有提出一个好的工作示例。在下面的示例中，它强制使用开头的 alpha，如果我输入一些内容，它会强制使用至少 3 个字符，但如果我不输入任何内容，它就会接受它为有效的。我也不太清楚如何将最后一个字符限制为字母数字。

<input type="text" name="hostname"
    pattern="^[a-zA-Z][a-zA-Z0-9-]{2,24}$"
    title="Enter a hostname, 3-14 characters, beginning
    with a letter and containing only alphanumeric
    characters and/or a hyphen.  It must end with an
    alphanumeric."
>

所以我想正确工作的一些测试是：

我有点怀疑我的 Google-fu 在这里让我失望了。

标签： htmlregexforms

解决方案

当你不输入任何内容时，不会发生验证，因为输入没有按要求指定，所以添加required属性。

此外，由于您希望该字段具有 3-24 个字符，因此第一个字符之后的重复应该是{1,22}，最后一个标记应该是[a-zA-Z\d]确保最后一个字符不是连字符：

^[a-zA-Z][a-zA-Z\d-]{1,22}[a-zA-Z\d]$


<form><input type="text" name="hostname" required pattern="^[a-zA-Z][a-zA-Z\d-]{1,22}[a-zA-Z\d]$" title="Enter a hostname, 3-14 characters, beginning
    with a letter and containing only alphanumeric
    characters and/or a hyphen.  It must end with an
    alphanumeric.">
    <button>click</button>
</form>

推荐阅读