做一个带有正则表达式的登录页面
时间: 2023-07-25 09:11:24 浏览: 34
好的,我可以为您介绍一下如何使用正则表达式来验证登录页面的输入。下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
<script>
function validateForm() {
var username = document.forms["myForm"]["username"].value;
var password = document.forms["myForm"]["password"].value;
var usernamePattern = /^[a-zA-Z0-9_-]{3,16}$/;
var passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
if (!usernamePattern.test(username)) {
alert("用户名格式不正确,必须是3~16位的字母、数字、下划线或减号!");
return false;
}
if (!passwordPattern.test(password)) {
alert("密码格式不正确,必须是至少8位字母和数字的组合!");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="myForm" action="login.php" onsubmit="return validateForm()" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="登录">
</form>
</body>
</html>
```
在这个示例中,我们使用了两个正则表达式来验证用户名和密码的格式。用户名必须是3~16位的字母、数字、下划线或减号,密码必须是至少8位字母和数字的组合。
如果输入的用户名或密码格式不正确,会弹出相应的提示框,阻止表单提交。否则,表单将提交到 login.php 页面进行处理。
希望这个示例对您有所帮助!