Witaj Koderze! Witamy na blogu Codewithrandom. Na tym blogu uczymy się, jak napisać program „walidacji formularza” przy użyciu HTML i JavaScript. Weryfikujemy hasła, potwierdzamy hasła i identyfikatory e-mail za pomocą JavaScript.
Walidator formularzy wykorzystujący HTML, CSS i JavaScript[/caption]
Mam nadzieję, że spodoba Ci się nasz blog, więc zacznijmy od podstawowej struktury HTML do sprawdzania poprawności formularzy.
Kod HTML:-
- W kodzie HTML mamy rodzica div, który ma nazwę klasy „Container”. Pod tym divmamy nagłówek z tagiem H1, mamy element formularza do utworzenia formularza, Ten formularz ma identyfikatori nazwę klasy o tej samej nazwie „Formularz”.
- w elemencie formularza mamy elementy wejściowedla nazwy użytkownika, e-maila, hasłaoraz potwierdź hasło. każdemu wejściu nadajemy unikalną nazwę identyfikatora.
- Mamy też element przycisku umożliwiający przesłanie formularza. skopiuj cały kod HTML i wklej go do swojego pliku HTML.
<body> <div class="container"> <h1>Register With Us</h1> <form action="" id="form" class="form"> <div class="input"> <label for="username">Username</label> <input type="text" name="username" id="username" placeholder="Username" autocomplete="off" /> <small>Error message</small> </div> <div class="input"> <label for="email">Email</label> <input type="text" name="email" id="email" placeholder="Email" autocomplete="off" /> <small>Error message</small> </div> <div class="input"> <label for="password">Password</label> <input type="password" name="password" id="password" placeholder="Password" /> <small>Error message</small> </div> <div class="input"> <label for="c-password">Confirmer Password</label> <input type="password" name="c-password" id="c-password" placeholder="Confirmer Password" /> <small>Error message</small> </div> <button>Submit</button> </form> </div> </body>
Jest cały kod HTML projektu. Teraz możesz zobaczyć dane wyjściowe bez CSS i JavaScript. Następnie piszemy CSS do elementu formularza stylu, projektujemy go i używamy JavaScript do sprawdzania hasła i sprawdzania poprawności adresu e-mail.
Wyjście kodu HTML:-
Kod CSS dla modułu sprawdzania poprawności formularzy: -
- W tym CSSnadajemy styl wszystkim elementom i odpowiednie dopełnienie, kolor, marginesy i lepszy wygląd. Zaimportowaliśmy także czcionkę Google w CSS.
- skopiuj cały kod CSS i wklej go do swojego pliku CSS.
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
body {
background-color: #f9fafb;
font-family: "Open Sans", sans-serif;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
width: 400px;
padding: 30px 40px;
}
.container h1 {
text-align: center;
margin: 0 0 20px;
font-size: 24px;
}
.input {
margin-bottom: 20px;
position: relative;
}
.input label {
display: block;
margin-bottom: 10px;
}
.input input {
width: 100%;
height: 40px;
padding: 0 15px;
background-color: transparent;
border: 2px solid #f0f0f0;
border-radius: 5px;
}
.input small {
display: block;
color: #e74c3c;
font-weight: bold;
font-size: 11px;
padding-top: 3px;
visibility: hidden;
}
.input.success input {
border: 2px solid #2ecc71;
}
.input.error input {
border: 2px solid #e74c3c;
}
.input.error small {
visibility: visible;
}
button {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #3498db;
border: 1px solid #3498db;
border-radius: 5px;
cursor: pointer;
color: #fff;
display: block;
font-size: 16px;
}
Teraz ukończyliśmy nasz kod CSS do stylizacji formularzy.
Wyjście kodu HTML + CSS:-
Teraz dodaj kod JavaScript i zatwierdź w formularzu.
Kod JavaScript dla modułu sprawdzania poprawności formularzy: -
- W kodzie JavaScript stworzyliśmy funkcję, logikę tworzenia funkcjonalności walidacyjnej w formularzu. Wszystkie dane wejściowe otrzymujemy za pomocą zmiennych stałych, utworzyliśmy logikę na tych wejściach i przycisk przesyłania.
- Zasadniczo używamy instrukcji if, else w JavaScript do sprawdzania warunku.
- W porządku, teraz po prostu spójrz na kod JavaScript i wklej go do pliku JavaScript.
const form = document.getElementById("form");
const username = document.getElementById("username");
const email = document.getElementById("email");
const password = document.getElementById("password");
const cPassword = document.getElementById("c-password");
//Show Error Message
function showError(input, message) {
const formControl = input.parentElement;
formControl.className = "input error";
const small = formControl.querySelector("small");
small.innerText = message;
}
//Show Success message
function showSuccess(input) {
const formControl = input.parentElement;
formControl.classList.add("success");
}
//Check Required fields
function checkRequired(inputArr) {
inputArr.forEach(function (input) {
if (input.value.trim() === "") {
showError(input, `${getFieldName(input)} is required`);
} else {
showSuccess(input);
}
});
}
// Get Field Name
function getFieldName(input) {
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
// Check Input Lenght
function checkLenghth(input, min, max) {
if (input.value.length < min) {
showError(
input,
`${getFieldName(input)} must be at least ${min} characters `
);
} else if (input.value.length > max) {
showError(
input,
`${getFieldName(input)} must be less than ${max} characters `
);
} else {
showSuccess(input);
}
}
// Check E-mail Is Valid
function checkEmail(input) {
const re = /^(([^<>()[]\.,;: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,}))$/;
if (re.test(input.value.trim())) {
showSuccess(input);
} else {
showError(input, "E-mail is not Valid");
}
}
// Check Password Match
function checkPasswordMatch(input1, input2) {
if (input1.value !== input2.value) {
showError(input2, "Passwords do not match");
}
}
form.addEventListener("submit", (e) => {
e.preventDefault();
checkRequired([username, email, password, cPassword]);
checkLenghth(username, 3, 15);
checkLenghth(password, 8, 25);
checkEmail(email);
checkPasswordMatch(password, cPassword);
});
Teraz kończymy cały kod w celu sprawdzenia poprawności formularza. Teraz czas zobaczyć wynik końcowy!
Końcowy wynik walidacji formularza przy użyciu HTML CSS i JavaScript: -
Przeczytaj także:
Teraz zakończyliśmy weryfikację formularza przy użyciu HTML CSS i JavaScript. Mam nadzieję, że podoba Ci się sprawdzanie poprawności formularzy. Możesz zobaczyć wyjściowe wideo i zrzuty ekranu projektu. Zobacz nasze inne blogi i zdobądź wiedzę z zakresu Front-end Development.
Dziękujemy!
W tym poście dowiadujemy się, jak utworzyć Walidację formularza przy użyciu HTML, CSS i JavaScript. Jeśli popełniliśmy błąd lub jakiekolwiek zamieszanie, zostaw komentarz, aby odpowiedzieć lub pomóc Ci w łatwej nauce.
Napisane przez — kod z losowym/Anki
Jak przeprowadzić walidację formularza za pomocą HTML, CSS i JavaScript?
W kodzie HTML mamy rodzica div, który ma nazwę klasy „Container”. Pod tym div mamy nagłówek z tagiem H1, mamy element formularza do utworzenia formularza, Ten formularz ma identyfikatori nazwę klasy o tej samej nazwie „Formularz”.
w elemencie formularza mamy elementy wejściowedla nazwy użytkownika, e-maila, hasłaoraz potwierdź hasło. każdemu wejściu nadajemy unikalną nazwę identyfikatora.
Walidator formularzy wykorzystujący HTML, CSS i JavaScript
W kodzie HTML mamy rodzica Div, który ma nazwę klasy „Container”. Pod tym Divmamy nagłówek ze znacznikiem H1, mamy element formularza do utworzenia formularza, Ten formularz ma identyfikatororaz nazwę klasy o tej samej nazwie „Formularz”
