JavaScript:فرم‌ها در جاوااسکریپت
محتویات
- ۱ اعتبار سنجی فرم‌ها در جاوااسکریپت
- ۲ جاوااسکریپت می‌تواند داده‌های عددی ورودی را اعتبار سنجی کند
- ۳ اعتبار سنجی خودکار فرم‌های HTML
- ۴ اعتبار سنجی داده‌ها
- ۵ نوع Constraint یا اعتبارسنجی محدودیتی در HTML
- ۶ اعتبار سنجی محدودیتی در ویژگی‌های ورود داده در HTML
- ۷ اعتبارسنجی‌های محدودیتی برای انتخابگرهای CSS
- ۸ منابع آموزشی
اعتبار سنجی فرم‌ها در جاوااسکریپت
اعتبار سنجی فرم‌های HTML را می‌توان با جاوااسکریپت انجام داد.[۱]
اگر یک فیلد فرم (fname) خالی باشد، این تابع یک پیغام را به صورت هشدار نمایش می‌دهد و مقدار false را برای جلوگیری از ثبت فرم، برمی‌گرداند:
مثال JavaScript
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
تابع می‌تواند زمانی فراخوانی شود که فرم ثبت شده باشد:
مثال فرم HTML
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
جاوااسکریپت می‌تواند داده‌های عددی ورودی را اعتبار سنجی کند
جاوااسکریپت اغلب برای اعتبار سنجی ورودی‌های عددی استفاده می‌شود:
لطفاً عددی بین ۱ و ۱۰ وارد کنید
خودتان امتحان کنید
اعتبار سنجی خودکار فرم‌های HTML
اعتبار سنجی فرم‌های HTML می‌تواند به صورت خودکارتوسط مرورگر صورت بپذیرد:
اگر یک فیلد فرم (fname) خالی باشد، ویژگیrequiredاز ثبت این فرم جلوگیری می‌کند:
مثال فرم HTML
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
 | اعتبار سنجی خودکار فرم‌های HTML در مرورگر اینترنت اکسپلورر ورژن ۹ یا ورژن‌های جدیدتر پشتیبانی نمی‌شود. |
اعتبار سنجی داده‌ها
اعتبار سنجی داده‌ها فرآیندی برای اطمینان حاصل کردن از درست بودن و کاربردی بودن داده ورودیست که از کاربر دریافت شده‌است.
اعتبار سنجی‌های معمول عبارتند از:
- آیا کاربر تمامی فیلدهای اجباری را پر کرده‌است؟
- آیا کاربر تاریخ و زمان معتبری را وارد کرده‌است؟
- آیا کاربر در فیلد عددی، مقدار متنی وارد کرده‌است؟
بیشتر موارد، هدف اعتبار سنجی داده‌ها، اطمینان از صحیح بودن داده‌های ورودی کاربر است.
اعتبار سنجی را می‌توان با استفاده از متدهای متفاوتی انجام داد و می‌توان در راه‌های گوناگونی ازآن استفاده کرد.
اعتبار سنجی سمت سرور بعد از ارسال داده به سمت سرور، توسط وب سرور اجرا می‌گردد.
اعتبار سنجی سمت کاربر (به انگلیسی: Client) توسط مرورگر وب و قبل از ارسال داده به وب سرور صورت می‌گیرد.
نوع Constraint یا اعتبارسنجی محدودیتی در HTML
در HTML5 نوع جدیدی ازمفهوم اعتبار سنجی در HTML به نام constraint اعتبارسنجی محدودیتی ارائه شد.
نوع اعتبار سنجی constraint یا اعتبار سنجی محدودیتی بر اساس موارد زیر است:
- اعتبار سنجی محدودیتی برای ویژگی‌های ورود داده در HTML
- اعتبار سنجی محدودیتی انتخابگرها در CSS
- اعتبار سنجی محدودیتی ویژگی‌ها و متدی‌های DOM
اعتبار سنجی محدودیتی در ویژگی‌های ورود داده در HTML
| توضیحات | ویژگی یا attribute |
| مشخص می‌کند که آن کنترل html می‌بایست غیرفعال باشد. | disabled |
| طول بیشترین مقداری که آن کنترل ورودی در html می‌تواند داشته باشد را تعیین می‌کند. | Max |
| حداقل طول مقداری که آن کنترل ورودی در html می‌تواند داشته باشد را تعیین می‌کند. | min |
| الگوی داده ورودی برای آن کنترل را تعیین می‌کند. | pattern |
| کنترل مورد نظر را به یک کنترل اجباری تبدیل می‌کند. | required |
| نوع یک عنصر ورودی را تعیین می‌کند. | type |
برای مشاهده لیست کامل این ویژگی‌ها، مقاله ما تحت عنوان ویژگی‌های ورودی در HTML را مطالعه بفرمایید.
اعتبارسنجی‌های محدودیتی برای انتخابگرهای CSS
| انتخابگر | توضیحات |
| :disabled | تمام عناصر ورودی را که ویژگی disabled آنها، مشخص شده‌است را انتخاب می‌کند. |
| :invalid | عناصری ورودی را که مقدار نامعتبر را انتخاب می‌کند. |
| :optional | عناصر ورودی غیر اجباری را انتخاب می‌کند. |
| :required | عناصر ورودی را که ویژگی required آنها مشخص شده‌است را انتخاب می‌کند. |
| :valid | عناصر ورودی را که مقادیر معتبر دارند را انتخاب می‌کنند. |
برای مشاهده لیست کامل این ویژگی‌ها، مقاله ما تحت عنوان انتخابگرهای CSS را مطالعه بفرمایید.
منابع آموزشی