使用js的正则表达式写出登录页面
时间: 2023-09-16 12:13:36 浏览: 47
以下是一个简单的登录页面,使用了JavaScript的正则表达式来验证用户输入的用户名和密码格式是否符合要求。如果符合要求,则可以提交表单并登录,否则提示用户重新输入。
```html
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
<script>
function validateForm() {
var username = document.forms["loginForm"]["username"].value;
var password = document.forms["loginForm"]["password"].value;
var usernameRegex = /^[a-zA-Z0-9_-]{3,16}$/;
var passwordRegex = /^[a-zA-Z0-9_-]{6,18}$/;
if (!usernameRegex.test(username)) {
alert("用户名格式不正确!请重新输入。");
return false;
}
if (!passwordRegex.test(password)) {
alert("密码格式不正确!请重新输入。");
return false;
}
}
</script>
</head>
<body>
<h2>登录页面</h2>
<form name="loginForm" onsubmit="return validateForm()" method="post">
<label>用户名:</label>
<input type="text" name="username" required><br><br>
<label>密码:</label>
<input type="password" name="password" required><br><br>
<input type="submit" value="登录">
</form>
</body>
</html>
```
在上述代码中,正则表达式`/^[a-zA-Z0-9_-]{3,16}$/`用于验证用户名。该正则表达式表示用户名必须由3-16位的字母、数字、下划线或短横线组成。
正则表达式`/^[a-zA-Z0-9_-]{6,18}$/`用于验证密码。该正则表达式表示密码必须由6-18位的字母、数字、下划线或短横线组成。
在`validateForm`函数中,获取了用户输入的用户名和密码,并使用`test`方法对其进行正则表达式匹配。如果匹配成功,则返回`true`,表示表单可以提交;否则返回`false`,并通过`alert`方法提示用户重新输入。