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

اعتبارسنجی فرم ها با جاوا اسکریپت
نادر
تاریخ بروز رسانی : 4 خرداد 1400
دسته بندی : آموزش جاوا اسکریپت

بفرست برای دوستات :

در درس جدید از آموزش جاوا اسکریپت می خواهیم نحوه اعتبارسنجی فرم ها با جاوا اسکریپت را آموزش دهیم، پس با ما همراه باشید.

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

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

به عنوان مثال اگر یک فیلد از فرم (fname) خالی باشد ، تابع زیر، یک پیام هشدار می دهد و از ارسال فرم با اطلاعات غلط جلوگیری می کند:

تابع جاوا اسکریپت

function validateForm() {

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

 if (x == "") {

    alert("Name must be filled out");

    return 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>

Name: <input type="text" name="fname">

</form>

خودتان آزمایش کنید

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

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

لطفاً یک عدد بین 1 تا 10 وارد کنید

خودتان آزمایش کنید

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

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

اگر یک فیلد از فرم (fname) خالی باشد ، ویژگی required از ارسال این فرم جلوگیری می کند:

مثال فرم HTML

<form action="/action_page.php" method="post">

  <input type="text" name="fname" required="">

  <input type="submit" value="ارسال">

</form>

</form>

خودتان آزمایش کنید

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

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

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

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

آیا کاربر تمام قسمتهای مورد نیاز را پر کرده است؟
آیا کاربر تاریخ معتبری وارد کرده است؟
آیا کاربر متن را در یک قسمت عددی وارد کرده است؟

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

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

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

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

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

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

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

اعتبار سنجی محدودیت ویژگی های INPUT
اعتبار سنجی محدودیت CSS Pseudo Selectors
اعتبار سنجی محدودیت ویژگی ها و توابع DOM

اعتبار سنجی محدودیت ویژگی های INPUT

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

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

اعتبار سنجی محدودیت CSS Pseudo Selectors

انتخاب کننده	شرح
`:disabled`	فیلد های input با مشخصه “disabled” را انتخاب می کند
`:invalid`	فیلد های input که مقدار اشتباه دارند را انتخاب می کند
`:optional`	فیلد های input که اجباری نیستند را انتخاب می کند
`:required`	فیلد های input که اجباری هستند را انتخاب می کند
`:valid`	فیلد های input که مقدار صحیح دارند را انتخاب می کند

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

اعتبار سنجی محدودیت توسط توابع DOM

تابع	شرح
`checkValidity()`	اگر عنصر INPUT حاوی داده های معتبر باشد ، true برمی گرداند.
`setCustomValidity()`	ویژگی validationMessage یک عنصر INPUT را تنظیم می کند.

مثال : اگر یک فیلد ورودی حاوی داده های نامعتبر است ، یک پیام را نمایش دهید:

تابع `checkValidity()`

<input id="id1" type="number" min="100" max="300" required="">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>

 function myFunction() {
  var inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  }
}
</script>

function myFunction() {

var inpObj = document.getElementById("id1");

if (!inpObj.checkValidity()) {

document.getElementById("demo").innerHTML = inpObj.validationMessage;

}

</script>

خودتان آزمایش کنید

اعتبارسنجی محدودیت با استفاده از خصوصیات DOM

خصوصیت	شرح
`validity`	حاوی خواص بولی مربوط به صحیح بودن یک عنصر ورودی است.
`validationMessage`	حاوی پیامی است که مرورگر هنگام غلط بودن مقدار یک عنصر ورودی نشان می دهد.
`willValidate`	نشان می دهد که آیا یک عنصر ورودی معتبر است.

ویژگی های معتبر بودن

ویژگی های اعتبار یک عنصر ورودی شامل تعدادی از ویژگی های مربوط به اعتبارسنجی داده می شود:

ویژگی	شرح
`customError`	برابر با true است، اگر پیام سفارشی اعتبارسنجی تنظیم شود.
`patternMismatch`	برابر با true است، اگر مقدار یک عنصر با ویژگی pattern آن مطابقت نداشته باشد.
`rangeOverflow`	برابر با true است، اگر مقدار یک عنصر بیشتر از ویژگی max باشد.
`rangeUnderflow`	برابر با true است، اگر مقدار یک عنصر کمتر از ویژگی min باشد.
`stepMismatch`	برابر با true است، اگر مقدار یک عنصر از نظر ویژگی step نامعتبر باشد.
`tooLong`	برابر با true است، اگر مقدار یک عنصر از ویژگی maxLength آن بیشتر شود.
`typeMismatch`	برابر با true است، اگر مقدار یک عنصر از نظر ویژگی type آن نامعتبر باشد.
`valueMissing`	برابر با true است، اگر عنصری (با ویژگی required ) فاقد مقدار باشد.
`valid`	برابر با true است، اگر مقدار یک عنصر معتبر باشد.

مثال ها

اگر مقدار یک فیلد ورودی بیشتر از 100 باشد ( ویژگی max فیلد ورودی ) ، یک پیام نمایش دهید:

خاصیت rangeOverflow

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>

function myFunction() {
  var txt = "";

    if (document.getElementById("id1").validity.rangeOverflow) {

      txt = "Value too large";

    }
  document.getElementById("demo").innerHTML = txt;

}

</script>

function myFunction() {

var txt = "";

if (document.getElementById("id1").validity.rangeOverflow) {

txt = "Value too large";

}

document.getElementById("demo").innerHTML = txt;

}

</script>

خودتان آزمایش کنید

اگر مقدار یک فیلد ورودی کمتر از 100 باشد ( ویژگی min ورودی ) ، یک پیام نمایش دهید:

خاصیت rangeUnderflow

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt = "";

    if (document.getElementById("id1").validity.rangeUnderflow) {

      txt = "Value too small";

    }
  document.getElementById("demo").innerHTML = txt;

}
</script>

function myFunction() {

var txt = "";

if (document.getElementById("id1").validity.rangeUnderflow) {

txt = "Value too small";

}

document.getElementById("demo").innerHTML = txt;

}

</script>

خودتان آزمایش کنید

منبع : W3Schools.com

درس بعدی : اشیاء در جاوا اسکریپت درس قبلی : json در جاوا اسکریپت

اعتبارسنجی فرم ها, جاوا اسکریپت, جاوا اسکریپت آموزش, جاوا اسکریپت به زبان ساده, جاوا اسکریپت چیست؟, جاوا اسکریپت زبان برنامه نویسی, جاوا اسکریپت کد

بانک پروژه

تابع جاوا اسکریپت

فرم HTML

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

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

مثال فرم HTML

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

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

اعتبار سنجی محدودیت ویژگی های INPUT

اعتبار سنجی محدودیت CSS Pseudo Selectors

اعتبار سنجی محدودیت توسط توابع DOM

تابع `checkValidity()`

اعتبارسنجی محدودیت با استفاده از خصوصیات DOM

ویژگی های معتبر بودن

مثال ها

خاصیت rangeOverflow

خاصیت rangeUnderflow

دیدگاهتان را بنویسید لغو پاسخ

تماس با ما

قوانین و مقررات

راهنمای مشتریان

مجوز ها

بانک پروژه

بانک پروژه

تابع جاوا اسکریپت

فرم HTML

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

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

مثال فرم HTML

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

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

اعتبار سنجی محدودیت ویژگی های INPUT

اعتبار سنجی محدودیت CSS Pseudo Selectors

اعتبار سنجی محدودیت توسط توابع DOM

تابع checkValidity()

اعتبارسنجی محدودیت با استفاده از خصوصیات DOM

ویژگی های معتبر بودن

مثال ها

خاصیت rangeOverflow

خاصیت rangeUnderflow

دیدگاهتان را بنویسید لغو پاسخ

تماس با ما

قوانین و مقررات

راهنمای مشتریان

مجوز ها

تابع `checkValidity()`