Validation API (Web Validation API)
اینجا درباره «اعتبارسنجی فرم» حرف می زنیم. اعتبارسنجی (Validation) یعنی چک کنیم ورودی درست است یا نه. با Validation API، مرورگر خودش کمک می کند و کد ما ساده تر می شود.
متدهای اصلی اعتبارسنجی فرم
دو متد مهم داریم: checkValidity() و setCustomValidity(). اولی درست بودن ورودی را برمی گرداند. دومی پیام خطای دلخواه را تنظیم می کند.
checkValidity(): اگر ورودی معتبر باشد،trueمی دهد.setCustomValidity(message): متن خطای سفارشی را تعیین می کند.
ویژگی های DOM برای اعتبارسنجی
validity مجموعه ای از بولین هاست. validationMessage پیام خطاست. willValidate می گوید این ورودی اعتبارسنجی می شود یا نه.
جزئیات ویژگی validity
customError: اگر پیام سفارشی تنظیم شده باشد،true.patternMismatch: مقدار باpatternجور نیست.rangeOverflow: مقدار ازmaxبیشتر است.rangeUnderflow: مقدار ازminکمتر است.stepMismatch: مقدار باstepسازگار نیست.tooLong: طول ازmaxLengthبیشتر است.typeMismatch: مقدار باtypeسازگار نیست.valueMissing: مقدار لازم است، ولی خالی است.valid: اگر همه چیز درست باشد،true.
نمونه: استفاده از checkValidity()
این تابع، ورودی را می گیرد و اگر نامعتبر بود، پیام خطا را نشان می دهد.
function myFunction() {
const inpObj = document.getElementById("id1");
if (!inpObj.checkValidity()) {
const msg = inpObj.validationMessage;
document.getElementById("demo").innerHTML = msg;
}
}
نمونه: تشخیص rangeOverflow
اگر مقدار از max بیشتر بود، پیام مناسب بده.
function myFunction() {
let text = "Value OK";
const el = document.getElementById("id1");
if (el.validity.rangeOverflow) {
text = "Value too large";
}
document.getElementById("demo").innerHTML = text;
}
نمونه: تشخیص rangeUnderflow
اگر مقدار از min کمتر بود، پیام مناسب بده.
function myFunction() {
let text = "Value OK";
const el = document.getElementById("id1");
if (el.validity.rangeUnderflow) {
text = "Value too small";
}
document.getElementById("demo").innerHTML = text;
}
نکته: برای راهنمایی بیشتر درباره APIها، صفحه مقدمه Web API را ببین. همچنین برای کار کامل با «اعتبارسنجی فرم»، از همین Validation API استفاده کن.
گام های عملی سریع
- روی ورودی ها
min،max،requiredبگذار. - با
checkValidity()وضعیت را چک کن. - در صورت خطا، از
validationMessageیا پیام سفارشی استفاده کن.
جمع بندی سریع
- اعتبارسنجی فرم را به مرورگر بسپار.
checkValidity()سریع و ساده است.validityجزئیات وضعیت را می دهد.setCustomValidity()پیام خطا را سفارشی می کند.