html登录界面+js正则表达式成功跳转失败清空表单+css
时间: 2023-08-01 13:11:55 浏览: 55
好的,下面是一个简单的 HTML 登录界面,使用了 JavaScript 的正则表达式进行表单验证,如果验证通过,则跳转到指定页面,否则清空表单并提示错误信息,同时使用 CSS 进行样式美化:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
form {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px;
margin: 50px auto;
max-width: 500px;
}
input {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 16px;
}
button {
display: block;
width: 100%;
padding: 10px;
border-radius: 5px;
background-color: #4CAF50;
color: #fff;
font-size: 16px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
.error {
color: #f00;
font-size: 14px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<form id="login-form">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<button type="submit">登录</button>
</form>
<script>
var form = document.getElementById('login-form');
form.addEventListener('submit', function(e) {
e.preventDefault();
var username = document.getElementById('username').value.trim();
var password = document.getElementById('password').value.trim();
var error = document.getElementById('error');
if (!username || !password) {
error.innerHTML = '用户名和密码不能为空!';
return;
}
var usernameReg = /^[a-zA-Z0-9_-]{4,16}$/;
if (!usernameReg.test(username)) {
error.innerHTML = '用户名格式不正确!';
form.reset();
return;
}
var passwordReg = /^[a-zA-Z0-9_-]{6,18}$/;
if (!passwordReg.test(password)) {
error.innerHTML = '密码格式不正确!';
form.reset();
return;
}
// 验证通过,跳转到指定页面
window.location.href = 'success.html';
});
</script>
</body>
</html>
```
在上面的代码中,我们使用了 `form` 元素的 `submit` 事件来进行表单验证。如果验证通过,则直接使用 `window.location.href` 进行页面跳转;否则,使用 `form.reset()` 来清空表单,并使用 JavaScript 修改 `error` 元素的内容来进行错误信息提示。
上面的代码中,我们还使用了 CSS 进行了一些样式美化,使得界面看起来更加漂亮。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)