HTML form doğrulaması JavaScript ile yapılabilir.
Bir form alanı (fname) boşsa, bu işlev bir mesaj uyarır ve false, formun gönderilmesini önlemek için:
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:
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
JavaScript genellikle sayısal girişi doğrulamak için kullanılır:
Lütfen 1 ile 10 arasında bir sayı girin
<script> function myFunction() { var x; var text = "Input OK"; //Get the value of input field with id="numb" x = document.getElementById("numb").value; // If x is Not a Number, or x is less than one, or x is grather than 10 then if (isNaN(x) || x < 1 || x > 10) { text = "Not valid"; } document.getElementById("demo").innerHTML = text; }Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
// Get the value of the input field with id="numb"
let x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
let text;
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
HTML form doğrulaması tarayıcı tarafından otomatik olarak gerçekleştirilebilir:
Bir form alanı (fname) boşsa required özelliği bu formun doldurulmasını engeller gönderilen:
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>
</body>
</html>
Otomatik HTML form doğrulaması Internet Explorer 9 veya önceki sürümlerde çalışmaz.
Veri doğrulama, kullanıcı girişinin temiz olmasını sağlama işlemidir. doğru ve kullanışlı.
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ı girişini sağlamaktır.
Doğrulama birçok farklı yöntemle tanımlanabilir ve birçok farklı yöntemle kullanılabilir. Farklı yollar.
Sunucu tarafı doğrulaması, girişin sunucuya gönderilmesinden sonra bir web sunucusu tarafından gerçekleştirilir. sunucu.
İstemci tarafı doğrulaması, giriş bir web sunucusuna gönderilmeden önce bir web tarayıcısı tarafından gerçekleştirilir.
HTML5, kısıtlama adı verilen yeni bir HTML doğrulama konseptini tanıttı doğrulama.
HTML kısıtlama doğrulaması aşağıdakilere dayanır:
Kısıtlama doğrulama HTML Giriş Nitelikleri
Kısıtlama doğrulama CSS Sözde Seçicileri
Kısıtlama doğrulama DOM Özellikleri ve Yöntemleri
Giriş öğesinin devre dışı bırakılması gerektiğini belirtir
Bir giriş öğesinin maksimum değerini belirtir
Bir giriş öğesinin minimum değerini belirtir
Bir giriş öğesinin değer modelini belirtir
Giriş alanının bir öğe gerektirdiğini belirtir
Bir giriş öğesinin türünü belirtir
Tam liste için HTML'ye gidin Giriş Nitelikleri.
Belirtilen "devre dışı" özniteliğine sahip giriş öğelerini seçer
Geçersiz değerlere sahip giriş öğelerini seçer
"Gerekli" öznitelik belirtilmeden giriş öğelerini seçer
Belirtilen "gerekli" özniteliğe sahip giriş öğelerini seçer
Geçerli değerlere sahip giriş öğelerini seçer
Tam liste için CSS'ye gidin Sözde Sınıflar.