با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
در این جلسه قصد داریم تا کار با API اعتبار سنجی جاوا اسکریپت JavaScript و خواص Constraint Validation DOM را یاد بگیریم.
API به معنی رابط برنامه نویسی کاربردی می باشد که توابع و متد هایی را در اختیار ما می گذارد که با استفاده از آن ها می توانیم از یک سیستم یا پلتفرم و…. استفاده کنیم.
متد های Constraint Validation DOM
| توضیحات | تابع |
| اگر یک عنصر ورودی شمال داده های معتبر باشد، true بر می گرداند | ()checkValidity |
| پیغام اعتبار سنجی یک عنصر ورودی را تنظیم می کند | ()setCustomValidity |
اگر یک فیلد ورودی داده غیر معتبر داشته باشد، یک پیام نمایش می دهیم:
مثال : متد checkValidity
| <input id="id1" type="number" min="100" max="300" required> <button onclick="myFunction()">OK</button> <p id="demo"></p> <script> function myFunction() { var inpObj = document.getElementById("id1"); if (!inpObj.checkValidity()) { document.getElementById("demo").innerHTML = inpObj.validationMessage; } } </script> |
خواص Constraint Validation DOM
| توضیحات | Property |
| مقداری boolean دارد که با معتبر بودن یک عنصر ورودی ارتباط دارد. | validity |
| شمال پیامی است که مرورگر هنگام نامعتبر بودن داده نمایش می دهد. | validationMessage |
| مشخص می کند که یک عنصر ورودی معتبر هست یا نه. | willValidate |
خواص Validity
validity property یک عنصر ورودی شامل یک عدد properties می شود که با اعتبار یک ورودی مرتبط است:
| توضیحات | Property |
| اگر پیام معتبر بودن تنظیم شده باشد، به true تنظیم می شود. | customError |
| اگر الگوی یک arrtibute با مقدار ورودی مطابقت نداشته باشد، به true تنظیم می شود. | patternMismatch |
| اگر مقدار ورودی از ویژگی max بیشتر باشد، به true تنظیم می شود. | rangeOverflow |
| اگر مقدار ورودی از ویژگی min کمتر باشد، به true تنظیم می شود. | rangeUnderflow |
| اگر مقدار ورودی در مورد ویژگی step نامعتبر باشد، به true تنظیم می شود. | stepMismatch |
| اگر مقدار ورودی فراتر از ویژگی maxlength باشد، به true تنظیم می شود. | tooLong |
| اگر مقدار یک ورودی در مورد ویژگی type نامعتبر باشد، به true تنظیم می شود. | typeMismatch |
| اگر فیلد ضروری مقدار نداشته باشد، به true تنظیم می شود. | valueMissing |
| اگر مقدار یک ورودی معتبر باشد، به true تنظیم می شود. | valid |
مثال
اگر عدد فیلد ورودی از ۱۰۰ بزرگتر باشد، یک پیغام نمایش می دهد:
مثال : اگر عدد فیلد ورودی از 100 بزرگتر بود پیغامی نمایش دهد
| <input id="id1" type="number" max="100"> <button onclick="myFunction()">OK</button> <p id="demo"></p> <script> function myFunction() { var txt = ""; if (document.getElementById("id1").validity.rangeOverflow) { txt = "Value too large"; } document.getElementById("demo").innerHTML = txt; } </script> |
اگر شماره در یک فیلد ورودی کمتر از ۱۰۰ باشد (ویژگی مین ورودی)، یک پیام را نمایش می دهد:
مثال : اگر عدد فیلد ورودی از 100 کمتر بود پیغامی نمایش دهد
| <input id="id1" type="number" min="100"> <button onclick="myFunction()">OK</button> <p id="demo"></p> <script> function myFunction() { var txt = ""; if (document.getElementById("id1").validity.rangeUnderflow) { txt = "Value too small"; } document.getElementById("demo").innerHTML = txt; } </script> |
جلسه API اعتبار سنجی جاوا اسکریپت JavaScript نیز به پایان رسید.
در جلسه بعد به آموزش تعریف اشیا در جاوا اسکریپت خواهیم پرداخت. با ما همراه باشید
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
