API‌های تأیید JavaScript

مетод اعتبارسنجی محدودیت

ویژگی توضیح
checkValidity() اگر عنصر input شامل داده‌های معتبر است، برابر با true بازمی‌گردد.
setCustomValidity() ویژگی validationMessage عنصر input را تنظیم می‌کند.

اگر زمینه ورودی شامل داده‌های نامعتبر است، پیامی نمایش داده می‌شود:

مетод checkValidity()

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

آزمایش کنید

ویژگی‌های DOM اعتبارسنجی محدودیت

ویژگی توضیح
validity ویژگی‌های بولین مربوط به اعتبارسنجی عنصر ورودی را شامل می‌شود.
validationMessage پیام‌هایی را شامل می‌شود که مرورگر در حالت false نمایش می‌دهد.
willValidate نشان‌دهنده این است که آیا اعتبارسنجی input انجام خواهد شد یا خیر.

ویژگی‌های اعتبارسنجی

ویژگی‌های اعتبارسنجی عنصر input شامل بسیاری از ویژگی‌های مرتبط با اعتبارسنجی داده‌ها است:

ویژگی توضیح
customError اگر پیام اعتبارسنجی سفارشی تنظیم شده است، برابر با true تنظیم می‌شود.
patternMismatch اگر مقدار عنصر با ویژگی pattern خود همخوانی ندارد، برابر با true تنظیم می‌شود.
rangeOverflow اگر مقدار عنصر از ویژگی max خود بزرگتر است، برابر با true تنظیم می‌شود.
rangeUnderflow اگر مقدار عنصر از ویژگی min خود کوچکتر است، برابر با true تنظیم می‌شود.
ناسازگار step اگر مقدار عنصر با ویژگی step خود معتبر نیست، برابر با true تنظیم می‌شود.
خیلی بلند اگر مقدار عنصر از ویژگی maxLength خود بزرگتر است، برابر با true تنظیم می‌شود.
نوع ناسازگار اگر مقدار عنصر با ویژگی type خود معتبر نیست، برابر با true تنظیم می‌شود.
مقدار غیب اگر عنصر (که ویژگی required دارد) هیچ مقداری ندارد، برابر با true تنظیم می‌شود.
معتبر اگر مقدار عنصر معتبر باشد، برابر با true تنظیم می‌شود.

مثال

اگر عدد ورودی در زمینه ورودی بزرگتر از 100 (عنصر input حداکثر اگر ویژگی ()، یک پیام نمایش داده می‌شود:

ویژگی rangeOverflow

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "مقدار خوب";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "مقدار خیلی بزرگ";
  }
}
</script>

آزمایش کنید

اگر عددی در فیلد ورودی کمتر از 100 باشد (عنصر min اگر ویژگی ()، یک پیام نمایش داده می‌شود:

ویژگی rangeUnderflow

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "مقدار خوب";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "مقدار خیلی کوچک";
  }
}
</script>

آزمایش کنید