JavaScript Formları
JavaScript Form Doğrulaması
HTML form doğrulaması JavaScript ile yapılabilir.
Bir form alanı (fname) boşsa, bu işlev bir mesajı uyarır ve formun gönderilmesini önlemek için false döndürür:
JavaScript Örneği
function validateForm() {
let
x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}Form gönderildiğinde işlev çağrılabilir:
HTML Formu Örneği
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
JavaScript Sayısal Girişi Doğrulayabilir
JavaScript genellikle sayısal girişi doğrulamak için kullanılır:
Lütfen 1 ile 10 arasında bir sayı girin
Otomatik HTML Form Doğrulaması
HTML form doğrulaması, tarayıcı tarafından otomatik olarak gerçekleştirilebilir:
Bir form alanı (fname) boşsa, requiredöznitelik bu formun gönderilmesini engeller:
HTML Formu Örneği
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
Otomatik HTML form doğrulaması, Internet Explorer 9 veya önceki sürümlerde çalışmaz.
Veri doğrulama
Veri doğrulama, kullanıcı girdisinin temiz, doğru ve kullanışlı olmasını sağlama sürecidir.
Tipik doğrulama görevleri şunlardır:
- kullanıcı gerekli tüm alanları doldurdu mu?
- kullanıcı geçerli bir tarih girdi mi?
- kullanıcı sayısal bir alana metin girdi mi?
Çoğu zaman, veri doğrulamanın amacı doğru kullanıcı girdisini sağlamaktır.
Doğrulama birçok farklı yöntemle tanımlanabilir ve birçok farklı şekilde devreye alınabilir.
Sunucu tarafı doğrulaması , giriş sunucuya gönderildikten sonra bir web sunucusu tarafından gerçekleştirilir.
İstemci tarafı doğrulama , girdi bir web sunucusuna gönderilmeden önce bir web tarayıcısı tarafından gerçekleştirilir.
HTML Kısıtlama Doğrulaması
HTML5, kısıtlama doğrulama adı verilen yeni bir HTML doğrulama konseptini tanıttı .
HTML kısıtlama doğrulaması şunlara dayanır:
- Kısıtlama doğrulama HTML Girdi Nitelikleri
- Kısıtlama doğrulama CSS Sözde Seçiciler
- Kısıt doğrulama DOM Özellikleri ve Yöntemleri
Kısıtlama Doğrulama HTML Girdi Nitelikleri
| Attribute | Description |
|---|---|
| disabled | Specifies that the input element should be disabled |
| max | Specifies the maximum value of an input element |
| min | Specifies the minimum value of an input element |
| pattern | Specifies the value pattern of an input element |
| required | Specifies that the input field requires an element |
| type | Specifies the type of an input element |
Tam liste için HTML Girdi Nitelikleri sayfasına gidin .
Kısıtlama Doğrulama CSS Sözde Seçiciler
| Selector | Description |
|---|---|
| :disabled | Selects input elements with the "disabled" attribute specified |
| :invalid | Selects input elements with invalid values |
| :optional | Selects input elements with no "required" attribute specified |
| :required | Selects input elements with the "required" attribute specified |
| :valid | Selects input elements with valid values |
Tam liste için CSS Pseudo Classes'a gidin .