اعتبار سنجی فرم های جاوا اسکریپت

سلام به شما کاربرای عزیز، حالتون چطوره همانطورکه میدانید برای ورود اطلاعات نیاز به اعتبارسنجی از طرف برنامه ای که شما مینویسید باید وجود داشته باشه تا اطلاعات ناخواسته وارد دیتابیس نکردد.(داده های ورودی) فرم های HTML را می توان با استفاده از جاوا اسکریپت اعتبار سنجی (validate) کرد.

چنانچه یکی از فیلدهای فرم تهی بود، تابع validateForm() پیغام “First name must be filled out” را نشان داده، در پی آن مقدار false را برمی گرداند و بدین ترتیب از ارسال فرم مورد نظر جلوگیری می کند:

مثال (جاوا اسکریپت):

function validateForm() {

var x = document.forms[“myForm”][“fname”].value;

if (x == null || x == “”) {

alert(“Name must be filled out”);

return false;

}

}

تابع مزبور را می توان به هنگام ارسال فرم صدا زد:

مثال (فرم HTML):

نمونه دو

اعتبار سنجی فرم های HTML

مرورگر می تواند فرم های HTML را به صورت خودکار اعتبار سنجی کند:

در صورتی که یکی از فیلدهای فرم (fname) خالی باشد، خصیصه ی (attribute) required مانع از ارسال فرم به سرور می شود:

مثالی از فرم HTML:

توجه: قابلیت اعتبار سنجی فرم های HTML در Internet Explorer 9 و ویرایش های قدیمی تر آن پشتیبانی نمی شود.

اعتبار سنجی داده ها

Data validation فرایندی است که طی آن ورودی های کامپیوتر از نظر سالم، صحیح، مفید و کارامد بودن بررسی و اعتبار سنجی می شوند.

مواردی که اعتبار سنجی می شوند، عبارتند از:

آیا کاربر تمامی فیلدهای الزامی را پر کرده است؟

آیا کاربر تاریخ معتبر را وارد کرده است؟

آیا کاربر در یک فیلد عددی، فقط کاراکترهای عددی را وارد کرده است؟

آیا کاربر آدرس ایمیل را با فرمت صحیح وارد کرده است؟

اغلب هدف از اعتبار سنجی داده ها کسب اطمینان از وارد شدن اطلاعات و داده های صحیح به برنامه ی کامپیوتری است.

اعتبار سنجی می تواند توسط متدهای مختلف تعریف شده و به گونه های مختلف نصب و آماده ی اجرا شود.

server side validation (اعتبار سنجی سمت سرور): پس از اینکه ورودی به سرور فرستاده می شود، ورودی ها توسط رایانه ای که برنامه ی تحت وب روی آن نصب است ((web server اعتبار سنجی می گردند.

Client side validation (اعتبار سنجی سمت سرویس گیرنده): پیش از اینکه ورودی به web server ارسال گردد، توسط مرورگر وب انجام می شود (ورودی ها پیش از ارسال به web server توسط مرورگر اعتبار سنجی می گردد).

قابلیت نوین Constraint validation (اعتبار سنجی محدودیت ها) در HTML5

HTML5 یک مفهوم جدید در زمینه ی اعتبار سنجی ارائه کرد به نام constraint validation.

Constraint validation مبتنی است بر:

Constraint validation HTML Input Attributes (اعتبار سنجی محدودیت خاصیت های input، html)

Constraint validation CSS Pseudo Selectors (اعتبار سنجی محدودیت انتخاب گرهای CSS Pseudo)

Constraint validation DOM Properties and Methods (اعتبار سنجی محدودیت خواص و متدهای DOM)

اعتبار سنجی محدودیت خاصیت های input، HTML

خصیصه (attribute)

شرح

disabled

به وسیله ی این خصیصه می توان المان ورودی (input element) را غیر فعال کنید.(در صورتی که مقدار این خصیصه روی disabled تنظیم شده باشد، آن کنترل غیر فعال بوده و کاربر دیگر اجازه ی استفاده از آن را نخواهد داشت ).

max

بیشترین مقداری که یک المان ورودی می تواند دریافت کند را تعیین می کند. مقدار maximum برای تگ & را مشخص می کند (ویژه ی number و date).

pattern

الگویی برای اعتبار سنجی یک فیلد ورودی مشخص می کند.

required

مشخص می کند که پر کردن فیلد input قبل از ارسال فرم باید انجام شود. مشخص می کند که فیلد ورودی باید حتما قبل از اینکه فرم ارسال گردد، پر شود.

type

این خصیصه نوع کنترل را تعیین می کند.

اعتبار سنجی محدودیت انتخاب گرهای CSS Pseudo

Selector (انتخاب گر)

شرح

:disabled

Selects input elements with the “disabled” attribute specified

المان های ورودی (کنترل) که خصیصه ی ” disabled ” برای آن ها تعریف شده باشد را گزینش می کند.

:invalid

Selects input elements with invalid values

المان های ورودی (کنترل هایی که ورودی دریافت می کنند) که دارای مقادیر نامعتبر یا غیر مجاز هستند را انتخاب می کند.

:optional

Selects input elements with no “required” attribute specified

کنترل هایی را که پر کردن آن پیش از ارسال فرم ضروری نیست را گزینش می کند.

المان های ورودی که خصیصه ی “required” برای آن ها تعریف نشده است را انتخاب می کند.

:required

Selects input elements with the “required” attribute specified

المان های ورودی که خصیصه ی “required” برای آن ها تعریف شده باشد را گزینش می کند. در واقع المان هایی ورودی که باید پیش از ارسال فرم پر شده باشند را انتخاب می کند.

:valid

Selects input elements with valid values

المان های ورودی که مقادیر معتبر دریافت کرده اند را گزینش می کند.