Scribd
Upload
6 views3 pages

Demo

Uploaded by

jintaixu33
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views3 pages

Demo

Uploaded by

jintaixu33
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

"use strict";

(function(){

const usernameErrorEl = document.querySelector('.register__error-username');


const usernameEl = document.querySelector('.register__username');
const registerEl =document.querySelector('.register');
const state = {
hasUsernameError:false,
}

function checkForUsernameError(){
state.hasUsernameError= !usernameEl.value;
}

function isFormValid(){
let isValid = true;
isValid = isValid && !state.hasUsernameError;
return isValid;
}

usernameEl.addEventListener('input',(e)=>{
checkForUsernameError();
render();
});

registerEl.addEventListener('submit',(e)=>{
checkForUsernameError();
if(!isFormValid()){
e.preventDefault();
render();
}
});

function render(){
showUsernameError();
}

function showUsernameError(){
if(state.hasUsernameError){
usernameErrorEl.innerHTML = `
Name must meet the following rules:
<ul>
<li>Must sound nice</li>
</ul>
`;
}else{
usernameErrorEl.innerHTML = '';
}
}
})();

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<script defer src="script.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="content">
<header class="header">
<h1>Register With Us</h1>
</header>
<main>
<form class="register" action="/register" method="POST">
<label class="register__label">
<span class="register__username-label">Username</span>
<span class="register__error register__error-username"></span>
<input name="name" class="register__name">
</label>
<label class="register__label">
<span class="register__email-label">Email</span>
<input name="email" type="email" class="register__email">
</label>
<label class="register__label">
<span class="register__confirm-label">Confirm Email</span>
<input name="confirm" type="email" class="register__confirm">
</label>
<button type="submit" class="register__submit">Register</button>
</form>
</main>
<footer>
<p><a href="#" title="Privacy Policy">Privacy Policy</a></p>
</footer>
</div>
</body>
</html>

body{
margin: 0;
font-family: sans-serif;
line-height: 1.6;
}

.header {
display: flex;
justify-content: center;
align-items: center;
background-color: beige;
height: 100px;
width: 100%;
text-align: center;
margin: 0 auto;
}

.content {
width: 100%;
max-width: 1000px;
padding: 2rem;
background: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}

footer {
text-align: center;
background-color: beige;
}

footer a:hover{
color:purple
}

input{
font: inherit ;
}

.register{
display: flex;
flex-direction: column;
max-width: 30rem;
border: 1px solid black;
padding: 8px;
margin: 0 auto;
margin-top: 16px;
}

.register__label{
display: flex;
flex-direction: column;
margin-bottom: 16px;
}

.register__error{
background-color: #ff000066;
padding: 8px;
}

.register__error:empty{
display: none ;
}

emailEl.addEventListener('input', function() {
checkForEmailError();
checkForConfirmError(); // 更改电子邮件时也检查确认电子邮件
render();
});

confirmEl.addEventListener('input', function() {
checkForConfirmError();
render();
});

You might also like