اعتبارسنجی فرم ها در HTML
اعتبارسنجی فرمها در HTML به کمک ویژگیها و خصوصیات مختلف انجام میشود. این اعتبارسنجی میتواند قبل از ارسال فرم به سرور، اطمینان حاصل کند که دادههای وارد شده صحیح هستند. اعتبارسنجی میتواند شامل بررسی نوع دادهها، طول ورودیها، مقادیر پیشفرض و غیره باشد.
1. ویژگیهای اعتبارسنجی HTML5:
در HTML5، ویژگیهای مختلفی برای اعتبارسنجی فرمها به صورت پیشفرض در اختیار شما قرار میگیرد:
الف) required:
این ویژگی برای اجباری کردن فیلدها استفاده میشود، یعنی کاربر باید مقداری وارد کند تا فرم ارسال شود.
ب) type:
برای تعیین نوع دادههایی که باید وارد شوند، مانند ایمیل، شماره تلفن، URL و غیره.
-
ایمیل:
<input type="email" id="email" name="email" required>مرورگر بهطور خودکار بررسی میکند که آیا ایمیل وارد شده درست است یا نه.
-
عدد:
<input type="number" id="age" name="age" min="18" max="100" required> -
URL:
<input type="url" id="website" name="website" required>
ج) min و max:
این ویژگیها برای تنظیم محدودیتهای مقدار عددی یا طول رشتهها استفاده میشوند.
د) pattern:
با استفاده از این ویژگی میتوانید الگوی خاصی (regular expression) را برای ورودی تعیین کنید. این ویژگی به ویژه برای اعتبارسنجی ورودیهای متنی مانند کد پستی یا شماره تلفن مفید است.
در اینجا، فقط شمارههای تلفن با الگوی xxx-xxx-xxxx معتبر خواهند بود.
هـ) minlength و maxlength:
این ویژگیها برای تعیین حداقل و حداکثر طول ورودیهای متنی استفاده میشوند.
2. استفاده از ویژگیهای HTML5 در فرمها:
<label for="email">ایمیل:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="age">سن:</label>
<input type="number" id="age" name="age" min="18" max="100" required><br><br>
<label for="phone">شماره تلفن:</label>
<input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" required><br><br>
<label for="password">پسورد:</label>
<input type="password" id="password" name="password" minlength="8" required><br><br>
<button type="submit">ارسال</button>
</form>
3. اعتبارسنجی سفارشی با جاوااسکریپت:
گاهی اوقات ممکن است بخواهید اعتبارسنجی خاصی انجام دهید که در HTML5 موجود نباشد یا رفتار دلخواه شما را برآورده نکند. در این صورت میتوانید از جاوااسکریپت برای اعتبارسنجی فرم استفاده کنید.
مثال از اعتبارسنجی با جاوااسکریپت:
<label for="email">ایمیل:</label>
<input type="email" id="email" name="email"><br><br>
<label for="age">سن:</label>
<input type="number" id="age" name="age"><br><br>
<button type="submit">ارسال</button>
</form>
<script>
document.getElementById("myForm").onsubmit = function(event) {
// اعتبارسنجی ایمیل
var email = document.getElementById("email").value;
if (email === "") {
alert("لطفا ایمیل را وارد کنید");
event.preventDefault(); // جلوگیری از ارسال فرم
return false;
}
// اعتبارسنجی سن
var age = document.getElementById("age").value;
if (age < 18 || age > 100) {
alert("سن باید بین 18 تا 100 باشد");
event.preventDefault(); // جلوگیری از ارسال فرم
return false;
}
return true;
}
</script>
در این مثال، اعتبارسنجی ایمیل و سن با استفاده از جاوااسکریپت انجام میشود. اگر ورودیها صحیح نباشند، فرم ارسال نمیشود و پیامی به کاربر نمایش داده میشود.
4. پشتیبانی از بازخوردها و پیامها:
مرورگرها بهطور خودکار بازخوردهایی را هنگام وقوع خطاهای اعتبارسنجی نمایش میدهند. اما شما میتوانید پیامهای سفارشی خود را با استفاده از ویژگی setCustomValidity در جاوااسکریپت تعیین کنید.
5. استفاده از novalidate:
در صورتی که بخواهید اعتبارسنجی خودکار مرورگر را غیرفعال کنید (مثلاً اگر از جاوااسکریپت برای اعتبارسنجی استفاده میکنید)، میتوانید ویژگی novalidate را به تگ <form> اضافه کنید.
<!-- فرم شما -->
</form>
با این ویژگیها، میتوانید اعتبارسنجیهای قوی و کارآمد برای فرمهای خود ایجاد کنید و تجربه کاربری بهتری فراهم کنید.
