帮我写一个带正则验证的登录页面
时间: 2023-02-09 07:51:16 浏览: 82
好的,我会尽力帮助你。这是一个带有正则表达式验证的简单登录页面的示例:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
</head>
<body>
<form id="login-form" method="post">
<label for="username">用户名:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="登录">
</form>
<script>
// 获取表单元素
var form = document.getElementById('login-form');
// 监听表单的提交事件
form.addEventListener('submit', function(event) {
// 阻止表单的默认提交行为
event.preventDefault();
// 获取用户名和密码的值
var username = form.elements.username.value;
var password = form.elements.password.value;
// 正则表达式验证用户名和密码
var usernameRegex = /^[a-zA-Z0-9]{3,20}$/;
var passwordRegex = /^[a-zA-Z0-9]{6,20}$/;
if (!usernameRegex.test(username)) {
alert('用户名格式不正确');
return;
}
if (!passwordRegex.test(password)) {
alert('密码格式不正确');
return;
}
// 用户名和密码验证通过,提交表单
form.submit();
});
</script>
</body>
</html>
```
这个示例中,我们使用 JavaScript 监听表单的提交事件,在提交表单之前进行正则表达式验证。用户名只能包含字母、数字,
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)