HTML DOM Input Password pattern 属性
htmlweb developmentfront end technology更新于 2025/10/13 14:36:17
HTML DOM Input Password pattern 属性用于设置或返回输入密码字段的 pattern 属性。它会根据 pattern 属性指定的正则表达式检查密码。
语法
以下是语法
设置 pattern 属性 −
passwordObject.pattern = regexp
此处，regexp 是用于检查密码字段的正则表达式。
示例
让我们看一个密码 pattern 属性的示例 −
<!DOCTYPE html>
<html>
<body>
<h1>Input Password pattern property</h1>
<p>The password can either be of three numeric characters or 6 alphabet characters from a to g</p>
<form action="/Sample_page.php">
Password: <input type="password" id="PASS" name="passW" pattern="[0-9]{3}|[a-g]{6}" title="Three numeric character or 6 alphabet between a-g">
<input type="submit">
</form>
<br>
<button onclick="passPattern()">GET PATTERN</button>
<p id="Sample"></p>
<script>
function passPattern() {
var P = document.getElementById("PASS").pattern;
document.getElementById("Sample").innerHTML ="The pattern attribute value is"+ P;
}
</script>
</body>
</html>
输出
这将产生以下输出 −
当输入的密码与 pattern 属性中指定的正则表达式不匹配时 −
当点击"获取模式"按钮时 −
在上面的例子中
我们创建了一个输入元素，其密码类型为 id=”Pass”，name=”PassW”并且 pattern=<[0-9]{3}|[a-g]{6}>。此处的 pattern 属性值是一个正则表达式，指定您可以输入三个数字或从 a 到 g 的 6 个字母。如果输入与此正则表达式不匹配，则 title 属性值将显示在输入框上方。此密码字段位于表单内，其 action 属性值设置为 “/Sample_page.php”。点击提交按钮后，表单数据将提交到这里 −
<form action="/Sample_page.php">
Password: <input type="password" id="PASS" name="passW" pattern="[0-9]{3}|[a-g]{6}" title="Three numeric character or 6 alphabet between a-g">
<input type="submit">
</form>
然后，我们创建了 GET PATTERN 按钮，当用户点击该按钮时，该按钮将执行 passPattern() 方法 −
<button onclick="passPattern()">GET PATTERN</button>
passPattern() 使用 getElementById() 方法获取类型为 password 的输入字段，并获取其 pattern 属性，该属性返回字符串类型的正则表达式。该正则表达式字符串被赋值给变量 P，并使用其 innerHTML 属性显示在 ID 为"Sample"的段落中。
function passPattern() {
var P = document.getElementById("PASS").pattern;
document.getElementById("Sample").innerHTML ="The pattern attribute value is"+ P;
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
