جسٹاگرافیک ویریفیکیشن اپ آئی پی

کنٹرول ایندیکٹور انکلیپشن

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

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

مетод checkValidity()

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">بسیار خوب</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 نشان‌دهنده این است که آیا ورودی عنصر باید اعتبارسنجی شود یا خیر.

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

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

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

مثال

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

ممکنات

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

آزمایش کنید

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

ویژگی rangeUnderflow

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

آزمایش کنید