API Validation JavaScript

روش‌ها و ویژگی‌های DOM را برای بررسی محدودیت‌ها

روش

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

ویژگی

ویژگی توضیح
validity ویژگی‌های بولان مربوط به اعتبار input عناصر را شامل می‌شود.
validationMessage پیام‌هایی را شامل می‌شود که هنگامی که اعتبار باشد، مرورگر نمایش می‌دهد.
willValidate نشان‌دهنده‌ای است که آیا 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>

آزمایش کنید

ویژگی‌های معتبرسازی

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

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

مثال

ویژگی rangeOverflow

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

<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>

آزمایش کنید

ویژگی rangeUnderflow

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

<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>

آزمایش کنید