Salom Koder! Codewithrandom blogiga xush kelibsiz. Bu Blogda Html va Javascript yordamida Formani tekshirish dasturini qanday yozishni o'rganamiz. Biz JavaScript yordamida parollarni, parollarni va elektron pochta identifikatorini tasdiqlaymiz.
HTML, CSS va JavaScript-dan foydalangan holda shakl tekshiruvi[/caption]
Umid qilamanki, bizning blogimiz sizga yoqadi, shuning uchun keling, shaklni tekshirish uchun asosiy Html tuzilmasidan boshlaylik.
HTML kodi: -
- HTMLkodida bizda ota-ona div bor, uning sinf nomi “Konteyner”. Ushbudiv ostida bizdaH1yorlig'i bo'lgan sarlavha mavjud, forma yaratish uchun forma elementimiz bor, Bu shaklda IDva sinf nomi bir xil nomli “Forma”ga ega.
- forma elementida bizda kirishelementlarifoydalanuvchi nomi, elektron pochta, parolva parolni tasdiqlang. biz har bir kirishga noyob id nomi beramiz.
- Shaklni yuborish uchun bizdatugmaelement ham mavjud. barcha HTML kodlarini nusxalang va ularni HTML faylingizga joylashtiring.
<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>
Loyihaning barcha HTML kodi mavjud. Endi siz CSS va JavaScriptsiz chiqishni ko'rishingiz mumkin. Keyin Uslub formasi elementiga CSS yozamiz va uni loyihalashtiramiz va parolni tekshirish va elektron pochtani tekshirish uchun JavaScript dan foydalanamiz.
Html kodini chiqarish:-
Formani tekshirish uchun CSS kodi: -
- UshbuCSSda biz barcha elementlarga uslub beramiz va to'g'ri to'ldirish, rang, chekka va yaxshiroq ko'rinish beramiz. Shuningdek, biz Google shriftini CSS-ga import qildik.
- barcha CSS kodlarini nusxa ko'chiring va ularning barchasini CSS faylingizga joylashtiring.
@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;
}
Endi biz formani shakllantirish uchun CSS kodimizni tugatdik.
Html + Css kodini chiqarish:-
Endi javascript kodini qo'shing va formada tasdiqlashni bering.
Shaklni tekshirish uchun JavaScript kodi: -
- JavaScript kodida biz shaklda tekshirish funksionalligini yaratish uchun funktsiya, mantiqni yaratdik. Biz barcha ma'lumotlarni const o'zgaruvchilari bo'yicha olamiz va biz ushbu kirishlar bo'yicha mantiq yaratdik va yuborish tugmasi.
- Biz asosan vaziyatni tekshirish uchun javascriptdagi if, else iborasidan foydalanamiz.
- Mayli, endi javaScript kodiga qarang va javascript faylingizga joylashtiring.
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);
});
Endi biz shaklni tekshirish uchun barcha kodimizni to'ldiramiz, endi yakuniy natijani ko'rish vaqti keldi!
Html Css va Javascript yordamida shaklni tekshirishning yakuniy natijasi: -
Shuningdek o'qing:
Endi biz Html Css va Javascript yordamida shaklni tekshirishni yakunladik. Shaklni tekshirish sizga yoqadi deb umid qilaman. Chiqish Videosi va Loyiha Skrinshotlarini Ko'rishingiz mumkin. Boshqa Bloglarimizni Ko'ring va Front-End ishlab chiqish bo'yicha bilimga ega bo'ling.
Rahmat!
Ushbu postda biz HTML, CSS va JavaScript yordamida shaklni tekshirishni qanday yaratishni o‘rganamiz. Agar biz xato yoki chalkashlikka yo'l qo'ygan bo'lsak, iltimos, javob berish yoki sizga oson o'rganishda yordam berish uchun sharh qoldiring.
Yozgan — Tasodifiy/Anki bilan kod
HTML, CSS va JavaScript yordamida shaklni tekshirishni qanday qilish mumkin?
HTMLkodida bizda ota-ona div bor, uning sinf nomi “Konteyner”. Ushbudiv ostida bizdaH1yorlig'i bo'lgan sarlavha mavjud, forma yaratish uchun forma elementimiz bor, Bu formada IDva sinf nomi bir xil nomli “Forma”ga ega.
forma elementida bizda kirishelementlarifoydalanuvchi nomi, elektron pochta, parolva parolni tasdiqlang. biz har bir kirishga noyob id nomi beramiz.
HTML, CSS va JavaScript-dan foydalangan holda shakl tekshiruvi
HTMLkodida “Konteyner” sinf nomiga ega bo‘lgan ota-onamizDiv. UshbuDiv ostida bizdaH1yorlig'i bor, Shaklni yaratish uchun forma elementimiz bor, Ushbu formada IDVa Sinf nomi bir xil nomli “Forma” mavjud
