JavaScript Doğrulama API'si

Sınırlama Doğrulama DOM Metodu

özellik tanım
checkValidity() input ögesi geçerli veri içeriyorsa true döner.
setCustomValidity() input ögesinin validationMessage özelliğini ayarlar.

giriş alanı geçersiz veri içeriyorsa bir mesaj gösterilir:

checkValidity() metodu

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">Tamam</button>
<p id="demo"></p>
<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  }
}
</script>

Kişisel Olarak Deneyin

kısıtlama doğrulama DOM özellikleri

özellik tanım
validity input ögesinin geçerliliği ile ilgili boolean özellikleri içerir.
validationMessage geçerlilik false olduğunda tarayıcı tarafından gösterilecek mesajları içerir.
willValidate input ögesinin doğrulama yapıp yapılmadığını gösterir.

geçerlilik özellikleri

input ögesinin geçerlilik özellikleri, veri geçerliliği ile ilgili birçok özellik içerir:

özellik tanım
customError özel bir geçerlilik mesajı ayarlandıysa true olarak ayarlanır。
patternMismatch ögesinin değeri pattern özelliğine uymuyorsa true olarak ayarlanır。
rangeOverflow ögesinin değeri max özelliğinden büyükse true olarak ayarlanır。
rangeUnderflow ögesinin değeri min özelliğinden küçükse true olarak ayarlanır。
stepMismatch ögesinin değeri step özelliğine geçersizse true olarak ayarlanır。
tooLong ögesinin değeri maxLength özelliğinden büyükse true olarak ayarlanır。
typeMismatch ögesinin değeri type özelliğine geçersizse true olarak ayarlanır。
valueMissing ögesi (required özelliğine sahip) değeri yoksa true olarak ayarlanır。
valid ögesinin değeri geçerliyse true olarak ayarlanır。

örnek

giriş alanındaki sayı 100'den büyükse (input ögesinin max Özelliği), bir mesaj görüntülenir:

rangeOverflow özelliği

<input id="id1" type="number" max="100">
<button onclick="myFunction()">Tamam</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "Değer Tamam";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Değer çok büyük";
  }
}
</script>

Kişisel Olarak Deneyin

Eğer giriş alanındaki sayı 100'den küçükse (input özelliğinde) min Özelliği), bir mesaj görüntülenir:

rangeUnderflow Özelliği

<input id="id1" type="number" min="100">
<button onclick="myFunction()">Tamam</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = = "Değer Tamam";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Değer çok küçük";
  }
}
</script>

Kişisel Olarak Deneyin