js表单验证
title: 表单验证
tags: js
category: 前端开发
其中我对源代码中的用户名和密码进行了进一步验证
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,500&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: DarkSeaGreen;
font-family: "Open Sans", sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
overflow: hidden;
width: 400px;
max-width: 90%;
margin: 0 auto;
}
.header {
border-bottom: 1px solid #f0f0f0;
background-color: #f7f7f7;
padding: 20px 40px;
}
.header h2 {
margin: 0;
}
.form {
padding: 30px 40px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control input {
border: 2px solid #cac4c4;
border-radius: 4px;
display: block;
font-family: inherit;
font-size: 14px;
padding: 10px;
width: 100%;
}
.form-control input:focus {
outline: 0;
border-color: #777;
}
.form-control.error input {
border-color: #e74c3c;
position: relative;
}
.form-control .error-message {
color: #e74c3c;
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form-control.error .error-message {
visibility: visible;
}
.form button {
background-color: DarkSeaGreen;
border: 2px solid DarkSeaGreen;
border-radius: 4px;
color: #fff;
display: block;
font-family: inherit;
font-size: 16px;
padding: 10px;
margin-top: 20px;
width: 100%;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h2>注册账号</h2>
</div>
<form id="form" class="form" novalidate>
<div class="form-control">
<input type="text" placeholder="用户名" id="username" />
<small class="error-message"></small>
</div>
<div class="form-control">
<input type="email" placeholder="邮箱" id="email" />
<small class="error-message"></small>
</div>
<div class="form-control">
<input type="password" placeholder="密码" id="password" />
<small class="error-message"></small>
</div>
<div class="form-control">
<input
type="password"
placeholder="确认密码"
id="password-confirm"
/>
<small class="error-message"></small>
</div>
<button>注册</button>
</form>
</div>
<script>
const form = document.getElementById("form");
const username = document.getElementById("username");
const email = document.getElementById("email");
const password = document.getElementById("password");
const passwordConfirm = document.getElementById("password-confirm");
form.addEventListener("submit", (e) => {
e.preventDefault();
validateForm();
});
// 表单验证
function validateForm() {
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const passwordConfirmValue = passwordConfirm.value.trim();
// 验证用户名
if (usernameValue === "") {
printError(username, "请正确输入用户名");
} else if (!validateUsername(usernameValue)) {
printError(username, "用户名格式有误！");
} else {
removeError(username);
}
// 验证邮箱
if (emailValue === "") {
printError(email, "请输入邮箱");
} else if (!validateEmail(emailValue)) {
printError(email, "邮箱格式有误");
} else {
removeError(email);
}
// 验证密码
if (passwordValue === "") {
printError(password, "请输入密码");
} else if (!validatePassword(passwordValue)) {
printError(password, "密码格式有误");
} else {
removeError(password);
}
// 验证确认密码
if (passwordConfirmValue === "") {
printError(passwordConfirm, "请确认密码");
} else if (passwordValue !== passwordConfirmValue) {
printError(
passwordConfirm,
"两次输入的密码不一致，请重新输入"
);
} else {
removeError(passwordConfirm);
}
}
// 打印错误提示
function printError(input, message) {
const formControl = input.parentElement;
const errorMessage =
formControl.querySelector(".error-message");
formControl.classList.add("error");
errorMessage.textContent = message;
}
// 删除错误提示（用户输入正确信息）
function removeError(input) {
const formControl = input.parentElement;
formControl.classList.remove("error");
}
// 验证邮箱格式
function validateEmail(email) {
return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}
// 验证用户名（6-16位字符，可由字母、数字及下划线组成，不区分大小写。）
function validateUsername(username) {
return /^[_0-9a-z]{6,16}$/i.test(username);
}
// 验证密码（6-20位字符，可由字母、数字及下划线组成，严格区分大小写。）
function validatePassword(password) {
return /^[_0-9a-z]{6,20}$/.test(password);
}
</script>
</body>
</html>
