标签：const 登录 color xhr getElementById document email 页面
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
display: block;
width: 100%;
padding: 10px;
background-color: #4caf50;
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.text-center {
text-align: center;
}
.form-group>p{
color: #ff4222;
}
</style>
</head>
<body>
<div class="container">
<h1>Register</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<!-- require 第一是要求必填,第二要求格式正确,否则不submit-->
<p id="emailTip"></p>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<p id="passWordTip"></p>
</div>
<div class="form-group">
<label for="passwordAgain">Password:</label>
<input type="password" id="passwordAgain" required>
</div>
<div class="text-center">
<button type="submit">Register</button>
</div>
</form>
</div>
</body>
</html>
<script>
const email=document.getElementById('email')
const emailTip=document.getElementById('emailTip')
email.onchange=()=> {
if (/^[0-9a-zA-Z._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/.test(email.value)) { //通过正则判断格式
const xhr = new XMLHttpRequest()
const params = `/test_email?email=${email.value}`
xhr.open('get', params, true)
xhr.onreadystatechange = () => {
//当后端的response成功回转后,readyState将变成为4,status将变为200
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)//输出后端回应给前端的信息
if (xhr.responseText) {
emailTip.innerHTML =xhr.responseText
}
}
}
xhr.send()
return true
}
document.getElementById('emailTip').innerHTML = '邮箱格式不正确'
}
document.getElementsByTagName('form')[0].onsubmit = () => {
const password = document.getElementById('password').value//定义password的值
const passwordAgain = document.getElementById('passwordAgain').value
if (password === passwordAgain) {
return true
}
document.getElementById('passWordTip').innerHTML = '两次密码不一致'
return false
}
</script>
标签：const,
登录,
color,
xhr,
getElementById,
document,
email,
页面
From： https://www.cnblogs.com/ckyjbd/p/17516431.html