Hızlı Form Geçerliliği için Javascript nasıl kullanılır

Neden Gelişmiş Form Geçerlilik Maddeleri

Form doğrulama basit bir şekilde devam eder:0) alanlar ve [[Döneticiler kısıtlar. HTML5 özellikleri sağlam bir temel sağlarken, karmaşık iş kurallarına uymanız gerektiğinde, gerçek zamanlı geri bildirim sağlar veya farklı tarayıcılarda düzgün bir kullanıcı deneyimi yaratırlar. JavaScript tabanlı doğrulama size tam kontrol verir ve nasıl geçerlilik çalışırsa, şifre gücü gibi özel kuralları uygulamanıza izin verir, kullanıcı isimleri için model uyumu, bağımlı alan mantığı ve bir kullanıcı adı, bağlı alan mantığı sağlar.

Müşteri-önemliliği, sunucu yüklerini ve kullanıcıların geri bildirim döngüsüni azaltır. Bir form sunmak ve sunucu yanıtını beklemek yerine, hataları hemen yakalanır. Ancak, istemcinin geçerliliğini hatırlamak kritiktir.[Dönetici:0).

Bu kılavuzda, vanilya JavaScript kullanarak tam gelişmiş bir doğrulama sistemi inşa ederek yürüyeceğiz. Özel kuralları nasıl tanımlayacağımızı öğrenecek, dinamik hata mesajları göster, birlikte birden çok alanı doğrulayacağız ve kodunuzu koruyabilirsiniz.Her bölüm hemen adapte olabilirsiniz.

HTML5 Limitlerini Anlamayın

HTML5 özellikleri, [[2|Dönetici:2|DüzDÜye ait olan özellikler ve [[Döneticiler için harikalar, ancak esneklikten yoksunlar. Örneğin:

JavaScript bu boşlukları doldurur. Etkinlik dinleyicileri ve özel işlevleri ile, hem ekspres hem de kullanıcı dostu olan geçerliliği yaratabilirsiniz.

HTML Form Yapı Yapısının Belirlenmesi

Temiz bir semantik formla başlayın. İşte kullanıcı adı, e-posta, şifre ve şifre için alanları içeren bir örnek.Biz erişilebilirlik ve boşEND:6 için özellikleri ekledik.

<form id="registrationForm" novalidate>
 <div class="form-group">
 <label for="username">Username</label>
 <input type="text" id="username" name="username" placeholder="e.g. johndoe" required>
 <span id="usernameError" class="error-message" role="alert"></span>
 </div>

 <div class="form-group">
 <label for="email">Email address</label>
 <input type="email" id="email" name="email" placeholder="[email protected]" required>
 <span id="emailError" class="error-message" role="alert"></span>
 </div>

 <div class="form-group">
 <label for="password">Password</label>
 <input type="password" id="password" name="password" placeholder="At least 8 characters" required>
 <span id="passwordError" class="error-message" role="alert"></span>
 </div>

 <div class="form-group">
 <label for="confirmPassword">Confirm Password</label>
 <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Repeat password" required>
 <span id="confirmPasswordError" class="error-message" role="alert"></span>
 </div>

 <button type="submit">Register</button>
</form>

Formdaki CSS'yi dikkate alın.Bu, tarayıcının kendi yerleşik geçerliliğini ortadan kaldırmasını söyler, böylece JavaScript ile her şeyi halledebiliriz. Hata mesajları göstermek veya gizlemek için CSS'yi kullanacağız ve görsel geri bildirim (örneğin, kırmızı sınırları) geçersiz alanlara ekleyin.

Bir Orta Geçerlilik Mantıkını Tasarlamak

Olay eller arasında geçerlilik kodunun yerine, özel kurallar içeren merkezi bir nesne yaratırız.Her kural, geri dönüşen bir işlevdir.(valid) veya ) veya opsiyonel bir hata mesajı ile birlikte.Bu yaklaşım kodu genişletmek ve korumak için kolaylaştırır.

const validators = {
 required: (value) => value.trim() !== '' || 'This field is required.',
 email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || 'Please enter a valid email address.',
 minLength: (min) => (value) => value.length >= min || `Must be at least ${min} characters.`,
 passwordStrength: (value) => {
 const errors = [];
 if (value.length < 8) errors.push('At least 8 characters.');
 if (!/[A-Z]/.test(value)) errors.push('One uppercase letter.');
 if (!/[0-9]/.test(value)) errors.push('One number.');
 if (!/[!@#$%^&*]/.test(value)) errors.push('One special character.');
 return errors.length === 0 || errors.join(' ');
 },
 match: (otherFieldId) => (value, formData) => {
 const otherValue = formData.get(otherFieldId);
 return value === otherValue || 'Passwords do not match.';
 }
};

Geçerliktörler parametrelenebilir - 03.03.2012 - Bu model değer bekleyen bir işlev döndürür.TheurFLT:13) geçerli olan bir başka alanın boşunu alır ve kullanımlarını kullanır (ŞaFLT:15) Bu model, değerleri karşılaştırmak için oldukça yeniden kullanılabilir.

Her Alan için Özel Kurallar Oluşturun

Geçerliktörlerin her alana uyguladığını tanımlamak. Bu haritalama, anahtarların alan isimleri ve değerlerin geçerlileyici işlevlerin dizileri olduğu basit bir nesnedir.

const fieldRules = {
 username: [
 validators.required,
 validators.minLength(3),
 (value) => /^[a-zA-Z0-9_]+$/.test(value) || 'Usernames can only contain letters, numbers, and underscores.'
 ],
 email: [
 validators.required,
 validators.email
 ],
 password: [
 validators.required,
 validators.passwordStrength
 ],
 confirmPassword: [
 validators.required,
 validators.match('password')
 ]
};

Yeni bir özel kural kolayca ekleyebilirsin, örneğin kullanıcı adı zaten alınmadığı (örneğin geçerlilik), listeye bir asen işlevi ekleyerek. Şimdilik tüm kuralları senkronizasyonu tutacağız.

Form Submission üzerinde Geçerlilik

Gönderimi engelleyen bir olay için bir etkinlik ekleyin, tüm geçerlicileri çalıştırın ve hataları toplar. Hatalar bulunmuyorsa, form teslim edilmesine izin verilir.

const form = document.getElementById('registrationForm');

form.addEventListener('submit', (event) => {
 event.preventDefault();
 const formData = new FormData(form);
 const errors = validateForm(formData);

 if (Object.keys(errors).length === 0) {
 // All valid – you can submit programmatically or send via fetch
 console.log('Form is valid. Submitting...');
 // form.submit();
 } else {
 displayErrors(errors);
 }
});

[FONT: 18] Her alanda çalışır, geçerlileyicilerini çalışır ve hata mesajlarını toplar. İşte uygulama:

function validateForm(formData) {
 const errors = {};
 for (const [fieldName, rules] of Object.entries(fieldRules)) {
 const value = formData.get(fieldName) || '';
 for (const rule of rules) {
 const result = rule(value, formData);
 if (result !== true) {
 errors[fieldName] = result; // result is the error string
 break; // stop after first failure for this field
 }
 }
 }
 return errors;
}

Gerçek Zamanda Geçerlilik Geri Dönüşümünü Gösterin

Kullanıcılar hataları görmekten faydalanıyor, sadece teslim değil. Hata çözülinceye kadar her alanda olay dinleyicileri ekleyin. ezici kullanıcılardan kaçınmak için, iyi bir model bulanık (alandan ayrılırsa) ve sonra hata çözülinceye kadar her sonraki girişte tekrar güncellenir.

document.querySelectorAll('#registrationForm input').forEach((input) => {
 input.addEventListener('blur', () => {
 validateField(input.id, input.value);
 });
 input.addEventListener('input', () => {
 // If the field currently has an error, re-validate on each keystroke
 const errorSpan = document.getElementById(input.id + 'Error');
 if (errorSpan.textContent !== '') {
 validateField(input.id, input.value);
 }
 });
});

[FONT: 9] işlevi sadece tek bir alan için kuralları kontrol eder ve ilgili hata süresini günceller.

function validateField(fieldId, value) {
 const formData = new FormData(form);
 formData.set(fieldId, value);
 const rules = fieldRules[fieldId];
 if (!rules) return;
 for (const rule of rules) {
 const result = rule(value, formData);
 if (result !== true) {
 setFieldError(fieldId, result);
 return;
 }
 }
 clearFieldError(fieldId);
}

Hatalar ve Başarı Devletler

CSS'yi geçerli / tekil olmayan alanların görsel görünümünü değiştirmek için kullanın.TheDAN YÜZÜŞÜNE ve GÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜN

function setFieldError(fieldId, message) {
 const input = document.getElementById(fieldId);
 const errorSpan = document.getElementById(fieldId + 'Error');
 input.classList.add('is-invalid');
 input.classList.remove('is-valid');
 input.setAttribute('aria-invalid', 'true');
 errorSpan.textContent = message;
}

function clearFieldError(fieldId) {
 const input = document.getElementById(fieldId);
 const errorSpan = document.getElementById(fieldId + 'Error');
 input.classList.remove('is-invalid');
 input.classList.add('is-valid');
 input.setAttribute('aria-invalid', 'false');
 errorSpan.textContent = '';
}

İlgili CSS olabilir:

.is-invalid {
 border-color: #dc3545;
}
.is-valid {
 border-color: #28a745;
}
.error-message {
 color: #dc3545;
 font-size: 0.875rem;
 min-height: 1.2em;
}

Bir Şifre Güçlü Ölçüm Cihazı

Bir şifre güç sayacı, kullanıcıların daha güçlü şifreler oluşturmaya teşvik eden görsel geri bildirimler sunar. Basit bir geçiş / bir başarı çubuğunu hesaplayabilirsiniz.

function passwordStrengthScore(password) {
 let score = 0;
 if (password.length >= 8) score += 1;
 if (password.length >= 12) score += 1;
 if (/[A-Z]/.test(password)) score += 1;
 if (/[a-z]/.test(password)) score += 1;
 if (/[0-9]/.test(password)) score += 1;
 if (/[^A-Za-z0-9]/.test(password)) score += 1;
 return score; // 0-6
}

Bir ölçüm cihazını güncelleyen şifre alanına bir kayıt yaptırın. Weak (0-2), Fair (3-4), Güçlü (5-6).

const passwordMeter = document.getElementById('passwordStrengthMeter');
const passwordInput = document.getElementById('password');

passwordInput.addEventListener('input', () => {
 const score = passwordStrengthScore(passwordInput.value);
 const percentage = (score / 6) * 100;
 passwordMeter.value = percentage;
 passwordMeter.style.accentColor = score < 3 ? '#dc3545' : score < 5 ? '#ffc107' : '#28a745';
});

Asynchronous Özel Kuralları

Bazı doğrulama kontrolleri, bir kullanıcı veya e-postanın kayıtlı olup olmadığını kontrol etmek gibi sunucuya bir yuvarlak-dönüşüm gerektirir. UI'yi engellemeden bunu işlemek için, geçerli bir sunucunuzu bir ate işlevi haline getirebilir ve sonucu beklemek için geçerli olan mantığı ayarlayabilirsiniz.

const asyncValidators = {
 uniqueUsername: async (value) => {
 try {
 const response = await fetch(`/api/check-username?username=${encodeURIComponent(value)}`);
 const data = await response.json();
 return data.available || 'Username is already taken.';
 } catch {
 return 'Could not verify username availability.';
 }
 }
};

Ardından, doğrulayıcıları desteklemek için uygun fiyatlı bir şekilde güncellemek gerekir. Aynı zamanda yükleme durumunu birden fazla eşzamanlı istekten kaçınmak için de idare etmelisiniz (gerekli istekle).

Üretim Formları için en iyi uygulamalar

Daha fazla devam etmek: Kütüphanelerle modüler doğrulama

Projeniz yüksek düzeyde özel kurallar ve gerçek zamanlı geçerlilik gerektirirse, bu makalede gösterilen hafif bir kütüphaneyi düşünebilirsiniz:0)Validate.js) veya yerleşik tasarım yönergeleri takip etmeniz gerektiğinde.

Ayrıca, Reaktör veya Vue gibi modern çerçevelerle özel geçerliliği birleştirebilirsiniz, ancak sunumdan ayrılan kuralların temel kavramları aynı kalır.

Common Pitfalls Kaçmak için

Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç

Özel JavaScript formu geçerlilik, parlatılmış, kullanıcı dostu web uygulamaları oluşturmak için temel bir yetenektir. Kodu yeniden kullanılabilir geçerli olan geçerlilikli fonksiyonlar ve gerçek zamanlı geri bildirimlerle yapılandırın, temel gerekli alanlardan her şeyi karmaşık şifre güç metreye ve çapraz saha karşılaştırmalarına kadar halledebilirsiniz.Bu makalede verilen örnekler kendi projelerinize adapte olmak için sağlam bir temel verir.

Unutmayın ki, geçerlilik kullanıcı deneyiminin kritik bir parçasıdır. formlarınızı iyice test edin, kullanıcı geri bildirimlerini dinleyin ve her zaman çift müşteri tarafından geçerlilik (daha fazla okuma için, [[Şeffingation Initiative guide on form validasyon).

Burada açıklanan kalıpları ve en iyi uygulamaları takip ederek, hem güvenli hem de kullanımı keyifli olan formları yaratacaksınız. Kod parçalarıyla deneyerek başlayın, iş mantığınızı eşleştirme kurallarını özelleştirin ve gerçek kullanıcı etkileşimlerine dayanarak iterate.