فرم های JavaScript

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

اعتبار سنجی فرم HTML را می توان با جاوا اسکریپت انجام داد.

اگر یک فیلد فرم (نام فامیل) خالی باشد، این تابع یک پیام را هشدار میدهد و false را بر میگرداند تا مانع ارسال فرم شود:

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> 
مشاهده مثال

جاوا اسکریپت می تواند ورودی عددی را تایید کند

جاوا اسکریپت اغلب برای تایید ورودی عددی استفاده می شود:

اعتبارسنجی ورودی
function myFunction() {
    var x, text;

    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;

    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "Input not valid";
    } else {
        text = "Input OK";
    }
    document.getElementById("demo").innerHTML = text;
}
مشاهده مثال

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

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

اگر فیلد فرم (نام خانوادگی) خالی باشد، ویژگی مورد نظر مانع از ارسال این فرم می شود:

اعتبارسنجی خودکار
 <form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form> 
مشاهده مثال

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

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

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

وظایف تایید معمولی عبارتند از:

  • آیا کاربر تمام فیلدهای مورد نیاز را پر کرده است؟
  • آیا کاربر وارد یک تاریخ معتبر شده است؟
  • آیا کاربر متن را در فیلد عددی وارد کرده است؟

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

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

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

اعتبار سنجی سمت مشتری توسط یک مرورگر وب انجام می شود، قبل از ورود به یک وب سرور.

اعتبار محدودیت HTML

HTML5 یک مفهوم اعتبار سنجی HTML جدید به نام اعتبار سنجی محدودیت را معرفی کرده است.

اعتبار سنجی محدودیت HTML بر اساس:

  • اعتبار محدودیت ویژگی های ورودی HTML
  • اعتبار محدودیت CSS
  • اعتبار سنجی محدودیت خواص و روش های DOM

محدودیت اعتبار ویژگی ورودی HTML

مشخصه
شرح
disabled
مشخص می کند که عنصر ورودی باید غیرفعال شود
max
حداکثر مقدار یک عنصر ورودی را مشخص می کند
min
حداقل مقدار یک عنصر ورودی را مشخص می کند
pattern
الگوی ارزش یک عنصر ورودی را مشخص می کند
required
مشخص می کند که فیلد ورودی نیاز به یک عنصر دارد
type 
نوع یک عنصر ورودی را مشخص می کند

برای مشاهده لیست کامل، به ویژگی های ورودی HTML بروید.

اعتبار سنجی انتخابگر CSS

انتخابگر
شرح
:disabled
عناصر ورودی با مشخصه "غیرفعال" انتخاب شده را انتخاب می کند
:invalid
عناصر ورودی با مقادیر نامعتبر را انتخاب می کند
:optional
عناصر ورودی را بدون هیچ ویژگی "مورد نیاز" مشخص می کند
:required
عناصر ورودی را با مشخصه "مورد نیاز" مشخص می کند
:valid
عناصر ورودی را با مقادیر معتبر انتخاب می کند

برای مشاهده لیست کامل، به کلاسهایPseudo  در  CSSبروید.

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری JavaScript

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط