Salut Coder! Bun venit pe blogul Codewithrandom. În acest blog, învățăm cum să scriem un program de validare a formularelor utilizând HTML și Javascript. Validăm parolele, confirmăm parolele și ID-ul de e-mail folosind JavaScript.
Validator de formulare folosind HTML, CSS și JavaScript[/caption]
Sper să vă placă blogul nostru, așa că să începem cu o structură HTML de bază pentru validarea formularelor.
Cod HTML:-
- În codul HTMLavem un div părinte, care are numele clasei „Container”. Sub acest div avem un titlu cu eticheta H1, avem un element de formular pentru a crea formularul, Acest formular are un ID și un nume de clasă cu același nume „Formular”.
- în elementul de formular avem elementele de intrare pentru nume de utilizator, e-mail, parolăși confirma-parola. dăm un nume id unic fiecărei intrări.
- De asemenea, avem un element butonpentru trimiterea formularului. copiați tot codul HTML și lipiți-le în fișierul dvs. 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>
Există tot codul HTML al proiectului. Acum, puteți vedea rezultatul fără Css și JavaScript. Apoi scriem Css în elementul de formular de stil și îl proiectăm și folosim JavaScript pentru validarea parolei și validarea e-mailului.
Ieșire cod HTML:-
Cod CSS pentru validatorul de formulare: -
- În acest CSSoferim stil tuturor elementelor și oferim o umplutură adecvată, culoare, margine și un aspect mai bun. De asemenea, am importat fontul Google în CSS.
- copiați tot codul CSS și inserați toate acestea în fișierul dvs. 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;
}
Acum am completat Codul Css pentru stilul formularelor.
Ieșire cod HTML + Css:-
Acum adăugați codul javascript și dați validarea în formular.
Cod JavaScript pentru validatorul de formulare: -
- În codul javaScript am creat o funcție, logică pentru a crea funcționalitatea de validare în formă. Obținem toate intrările prin variabile const și am creat logica pe aceste intrări și butonul de trimitere.
- În principiu, folosim if, else declarația în javascript pentru verificarea stării.
- Bine, acum doar uită-te la codul javaScript și inserează-l în fișierul tău 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);
});
Acum completăm întregul cod pentru validarea formularului, acum este timpul să vedem rezultatul final!
Rezultatul final al validării formularului utilizând HTML CSS și Javascript:-
Citiți și:
Acum am finalizat validarea formularului folosind Html Css și Javascript. Sper că vă place validarea formularului. Puteți vedea videoclipul de ieșire și capturile de ecran ale proiectului. Vedeți celelalte bloguri ale noastre și obțineți cunoștințe în dezvoltarea front-end.
Mulțumesc!
În această postare, învățăm cum să creăm o „validare a formularelor” folosind HTML, CSS și JavaScript. Dacă am făcut o greșeală sau orice confuzie, vă rugăm să lăsați un comentariu pentru a răspunde sau pentru a vă ajuta în învățarea ușoară.
Scris de — Cod cu aleatoriu/Anki
Cum se face validarea formularelor folosind HTML, CSS și JavaScript?
În codul HTMLavem un div părinte, care are numele clasei „Container”. Sub acest div avem un titlu cu eticheta H1, avem un element de formular pentru a crea formularul, Acest formular are un ID și un nume de clasă cu același nume „Formular”.
în elementul de formular avem elementele de intrare pentru nume de utilizator, e-mail, parolăși confirma-parola. dăm un nume id unic fiecărei intrări.
Validator de formulare folosind HTML, CSS și JavaScript
În Codul HTML avem un părinte Div, care are numele clasei „Container”. Sub această Divavem un titlu cu eticheta H1, Avem un element de formular pentru a crea formularul, Acest formular are un IDși un nume de clasă cu același nume „Formular”
