html - 您可以通过模式属性使用正则表达式作为 HTML 字段的验证吗

Question

我正在寻找一种验证 HTML 字段（例如标准邮政编码等）的简单方法。由于纯粹的易用性，我真的不希望使用 JavaScript，并希望可以在文本输入的模式属性中使用复杂的正则表达式。

如果您有更好的建议，他们非常欢迎。

谢谢

Answer 1

是的，因为这是模式属性的重点。

在这里您可能对此感兴趣：http: //html5pattern.com/Postal_Codes

以及带有可选空格的英国邮政编码 RegEx：[A-Za-z]{1,2}[0-9Rr][0-9A-Za-z]?( |)[0-9][ABD-HJLNP-UW-Zabd-hjlnp-uw-z]{2}

Answer 2

对于英国缩写日期，以下正则表达式可用于 HTML 输入模式属性，以强制执行日期-月-年格式，其中日期为 1-31，月份为 1-12，年份为 1930-1999...

(?:[1-9]|1[0-9]|2[0-9]|3[0-1])\/(?:1[0-2]|[1-9])\/(19[3-9]{1}[0-9]{1})

应用正则表达式，像这样添加一些 CSS 视觉提示，Bob 就是你的叔叔：

input::placeholder {
    color: rgb(46, 163, 242);
    font-style: italic;
}
input:focus {
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.4) inset;
}
input:required:invalid, input:focus:invalid {
    border: 2px solid rgb(255, 159, 159) !important;
    background: white;
}
input:required:valid {
    background: rgba(196, 255, 214, .5) !important;
    color: black !important;
}

section.form-layout input { 
    width: 120px;
    height: 27px;
    border: 2px solid rgb(46, 163, 242);
    border-radius: 5px;
    text-align: center;
    color: rgb(46, 163, 242);
    transition: all .5s ease;
}
*:focus {
    outline: none;
}

<section class="form-layout">
    <p>Enter your DOB <span style="font-style: italic;">(dd/mm/yyyy)</span>:</p>
    <input required id="dob-1" placeholder="Date of Birth" type="text" pattern="(?:[1-9]|1[0-9]|2[0-9]|3[0-1])\/(?:1[0-2]|[1-9])\/(19[3-9]{1}[0-9]{1})" autocomplete="off">
</section>