سبد (0)

تبلیغات

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

اعتبارسنجی (Validation) فرم ها در JavaScript

Wiki

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

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

  • آیا فیلدهای الزامی (ستاره دار) پر شده است؟
  • آیا کاربر آدرس ایمیل را به فرمت صحیح وارد کرده است؟
  • آیا کاربر، داده صحیح را وارد کرده است؟
  • آیا کاربر در یک فیلد عددی، فقط کاراکترهای عددی را وارد کرده است؟

فیلدهای الزامی (Required)

Wiki

تابع زیر، خالی بودن فیلد را چک می کند. اگر خالی باشد، پیغام "First name must be filled out" ظاهر می شود و فرم به سرور ارسال نمی شود:

function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}

تابع بالا، زمانی فراخوانی می شود که، رویداد "onsubmit" فرم اتفاق بیافتد:

مثال (اعتبارسنجی فرم ها در JavaScript)

<form name="myForm" action="js_validation.php" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
خودتان امتحان کنید »

اعتبار سنجی ایمیل (E-mail Validation)

Wiki

تابع زیر، فرمت معمول آدرس ایمیل را چک می کند.

فرمت صحیح آدرس ایمیل شامل موارد زیر است:

  1. باید شامل یک علامت "@" باشد.
  2. باید حداقل یک نقطه (.) داشته باشد باشد.
  3. علامت "@" نباید اولین کاراکتر باشد.
  4. آخرین نقطه، باید بعد از علامت "@" ظاهر شود.
  5. بعد از آخرین نقطه باید حداقل 2 کاراکتر بیاید.
function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
}

تابع بالا، زمانی فراخوانی می شود که، رویداد "onsubmit" فرم اتفاق بیافتد:

مثال (اعتبارسنجی فرم ها در JavaScript)

<form name="myForm" action="js_validation.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
خودتان امتحان کنید »

دیدگاه‌ها  

0 # sevda 1397-04-29 15:53
سلام خسته نباشید
لطفا میشه جواب سوالمو بدید
تو اعتبارسنجی ایمیل atpos و dotpos که تو کد اومدن چین؟ توضیح میشه بدین؟ متوجه نشدم و به توضیحات نیاز دارم چون دقیقا رو این موضوع گیر کردم.
var atpos=x.indexOf("@");
var dotpos=x.lastIn dexOf(".");
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1397-04-30 09:13
سلام، atpos و dotpos دو متغییر با نام دلخواه است که تعریف شده و قراره که محل قرارگیری علامت (@) و علامت (.) رو درشون ذخیره کنیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # o.m 1397-03-29 19:32
سلام با تشکر از سایت خوبتون
چطور میشه تعداد کاکتر هایی رو که توی پنجره باز شده مینویسیم سنجید؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # مهدی دلاور 1396-05-05 21:00
سلام و خسته نباشید.
میخوام بدونم الان این درس رو درست متوجه شدم یا خیر.
ویژگی onsubmit به همراه تگ form میاد و کارش اینه که وقتی کلید ارسال اطلاعات رو میزنیم یک تابع اسکریپتی رو فراخوانی کنه. این تابع هم دو تا کار میتونه انجام بده:
1- پیغامی رو بعد از ارسال اطلاعات به کاربر بده که معمولا پیغام ارسال موفقیت آمیز اطلاعات هست.
2-اطلاعات رو قبل از ارسال چک کنه تا در صورت درست بودن اطلاعات اونها رو ارسال کنه.
مورد اول که چیز خاصی نداشت. اما مورد دوم ویژگی onsubmit تابع مورد نظر رو با کلمه return آورده. از اونجایی که تابع ذکر شده در مثال خروجیش مقدار true یا false هست ، آیا به کار بردن این ویژگی به صورت onsubmit="retur n validateFom()" p به این معنی میشه که مقدار نهایی این تابع اگر true باشد فرم ارسال گردد و اگر false باشه فرم ارسال نشه؟ یعنی میخوام کاربرد کلمه return رو در ویژگی onsubmit مطمعن بشم که کاربردش چیه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # waranlo 1395-10-06 18:10
من مقادیر فرم هامو سمت سرور اعتبار سنجی میکنم .میخوام وقتی برمیگرم به صفحه فرم تا کاربر خطارو مشاهده کنه مقادیری که قبلا درست وارد کرده رو مجبور نشه دوباره وارد کنه ...
چجوری این کارو با جاوا اسکریپت انجام بدم ؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # Shahaboddin 1395-04-24 19:09
سلام، یه سوال دستور return false به تابع validateform برگشت داده میشه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1395-04-24 19:43
سلام
لطفا به کد HTML زیر که مربوط به مثال بالاست توجه کنید:<form name="myForm" action="js_vali dation.php" onsubmit="return validateForm(); " method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>

اگر در تگ form در بالا به رویداد onsubmit توجه کنید، خواهید دید که فرم Submit نخواهد شد مگر اینکه تابع validateForm مقدار true برگرداند...! پس سوال شما در اینجا پاسخ داده شد.
در واقع زمانی که فیلدهای الزامی، تنظیم نشوند و یا فیلد ایمیل بطور صحیح وارد نشود تابع validateForm مقدار false را بر میگرداند (return false) و به این ترتیب form به سرور ارسال (submit) نخواهد شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # Guest 1394-12-20 15:10
سلام ، خسته نباشید

شما در بخش " اعتبار سنجی ایمیل (E-mail Validation) " در بخشی که کد های جاوا اسکریپت رو نوشتید ، نوشتین که :

if (atpos
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # مهرداد صلاحی 1394-12-20 21:59
با سلام و تشکر
کدهاتون کامل نیومده!!!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # MohammadZeus 1394-12-20 23:33
سلام ، خسته نباشید

شما در بخش " اعتبار سنجی ایمیل (E-mail Validation) " در بخشی که کد های جاوا اسکریپت رو نوشتید ، نوشتین که :

if (atpos
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-12-21 10:03
با سلام و خسته نباشید.
کدها کامل نیومده!!!

در بارگذاری کدها به علامت‌های > و < دقت کنید. برای علامت > عبارت ;lt& و برای علامت < عبارت ;gt& رو بذارید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # hossein ghafari 1394-12-16 16:36
سلام
میخواستم یه کد بنویسم که چک کنه اگه جاوا اسکریپت مرور گر غیر فعاله خودش فعال کنه.
یا اگه جاوا اسکریت غیر فعال بود دکمه ثبت نام غیر فعال بشه

خواهشا زود جواب بدهید خیلی فوریه.با تشکررررررر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-12-16 21:36
با سلام.
میشه توسط تگ script فهمید که کدهای جاوااسکریپت در مرورگر قابل اجرا هستند یا خیر. و توسط تگ noscript میشه فهمید که کدهای جاوااسکریپت در مرورگر کار نمی‌کنه. کد زیر:
<script type="java script"> ;
... construction of ajaxy-link, setting of "js-enable d" cookie flag, etc..
</script>
<noscript>
<a href="page _without_js.php ?nojs=1" >Page without Javascript</a>
</noscript>


ولی اینکه بشه این قابلیت رو از طریق کد فعال یا غیر فعال کرد رو باید از طریق مرورگر انجام بدید. فکر نمی‌کنم از طریق کد بشه. چون به لحاظ امنیتی مشکل داره.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # hossein ghafari 1394-12-17 09:25
میشه با جاوا اسکریپت شرط گذاشت اگه جاوا اسکریپت مرورگر غیر فعاله به صفحه دیگه منتقل شه.با تشکررر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-12-18 19:55
می تونید از تگ noscript استفاده کنید. این تگ زمانی کار می‌کنه که جاوااسکریپت فعال نباشه...
می‌تونید تو این تگ یه نشانه‌ای بذارید مبنی بر اینکه جاوااسکریپت غیر فعاله.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیرکیان 1394-12-17 14:01
در قسمت NoScript این کارو انجام بدید و از اسکریپت های جاوااسکریپت استفاده کنید و نتیجه رو به من هم بگید که ببینم میشه یا نه :)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # meray 1394-12-13 21:43
سلام اشکال کد زیر چیه ؟ پیام های مربوط به @ بعد از تصحیح فیلد هنوز نمایش داده میشه بعد سابمیت میشه
function validateForm() { var name=document.f orms["chform"][ "chname"].value ; var address=documen t.forms["chform "]["chaddress"] .value; var admin=document. forms["chform"] ["chadmin"].val ue; var atposaddress=ad dress.indexOf(" @"); var atposadmin=admi n.indexOf("@"); var flage=true; if(atposaddress >0) { document.getEl ementById("addr essid").innerHT ML=" آدرس کانال با @ شروع میشود"; var flage=false; } if(atposadmin>0 ) { document.getEle mentById("admin id").innerHTML= "آی دی ادمبن با @ شروع میشود"; var flage=false; } return flage; } name addres: admin:
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-12-14 07:46
با سلام.
ظاهرا مشکلی تو کد نیست...
تو مفهوم کد مشکلی نیست. شما باید نحوه نمایش خطا رو تصحیح کنید. جلوی کنترل مربوط یه تگ span با id خاصی بذارید و در صورت خطا اون رو پر کنید.

نکته‌اش این هست که اول تابع هم این span ها رو خالی باید کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # Merayyy 1394-12-14 13:25
به نقل از مهرداد صلاحی:
با سلام.
ظاهرا مشکلی تو کد نیست...
تو مفهوم کد مشکلی نیست. شما باید نحوه نمایش خطا رو تصحیح کنید. جلوی کنترل مربوط یه تگ span با id خاصی بذارید و در صورت خطا اون رو پر کنید.

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



چطوری خطا رو خالی کنم
document.getEl ementById("addr essid").innerHT ML=" "

کد بالا رو به تابع اضافه کنم درسته؟یا روشدیگری هم هست
نکته‌اش این هست که اول تابع هم این span ها رو خالی باید کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-12-15 07:02
درسته. می‌تونید فاصله هم نذارید و فقط دو تا دابل‌کوتیشن بذارید.

بله نکته‌اش این که با هر بار اجرا فرم دوباره چک می‌شه. پس باید ابتدا خطا‌های قبلی پاک بشه و بعد از چک شدن اگه خطا داشت دوباره نمایش داده بشه و اگه خطا نداشت، که هیچی.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # علیرضا نظری 1394-10-27 11:58
برای این که دو تابه رو مقدارش رو به فرم برگردونیم بایدچ کار کنیم ؟؟
این خط کد ارور میداد!!!!!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # مهرداد صلاحی 1394-12-14 07:47
سلام.
متن خطا رو بذارید تا بشه راهنمایی کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # محمدحسین واحدی 1394-07-07 15:26
با سلام
چطور می توان :
1 - یک textbox ایجاد کرد که فقط عدد در ان وارد شود؟
2 - یک textbox ایجاد کرد که بیشتر از 4 کارکتر در ان وارد نشود ؟
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1394-07-08 10:15
سلام
1- برای انجام این کار چندین راه وجود دارد اما ساده ترین آنها استفاده از پلاگین های jQuery است، برای این منظور به آدرس زیر مراجعه فرمایید:
http://beyamooz.com/jquery/340-jquery-plugin/4079-%D9%BE%D9%84%D8%A7%DA%AF%DB%8C%D9%86-%D9%85%D8%A7%D8%B3%DA%A9-%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C
2- برای این مورد نیر می توان از پلاگین بالا استفاده نمود ولی راه حل ساده تر آن این است که خصوصیت maxlength را برای فیلد مورد نظر تنظیم کنید.<input type="text" name="country_c ode" pattern="[A-Za- z]{3}" title="Three letter country code" maxlength="2" />
البته برای اعتبار سنجی فرم ها در HTML5 خصوصیت Pattern اضافه شده است، پیشنهاد می کنم این مورد را نیز بررسی فرمایید: البته در مثال بالا علاوه بر ویژگی Maxlength از Pattern نیز استفاده شده است.
برای کسب اطلاعات بیشتر در مورد Pattern به لینک زیر مراجعه کنید:
http://beyamooz.com/html5/623-%D8%AE%D8%B5%D9%88%D8%B5%DB%8C%D8%AA-%D9%87%D8%A7%DB%8C-%D8%AC%D8%AF%DB%8C%D8%AF-%D8%AF%D8%B1-html5
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # محمد 1394-06-22 12:40
سلام
من فرم ثبت نام ساختم ولی نمیدونم چجوری می تونم بعد از ثبت نام عبارت ثبت نام انجام شد رو بهش اضافه کنم لطفا منو راهنمایی کنید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # شهربانو دوستی 1394-06-22 19:41
با سلام
آیا اتصال با پایگاه داده و ذخیره اطلاعات ارسالی در پایگاه داده را هم تنظیم کرده اید؟
اطلاعاتی که در یک فرم نوشته می شوند باید در پایگاه داده ذخیره شوند. پس برای مورد مطرح شده می بایست چک کنید در صورتی که این اطلاعات در پایگاه داده درج شده باشد عبارت ثبت نام انجام شد نمایش داده شود. در صورتی که با کد نویسی php آشنایی دارید می توانید برای نمونه از تصویر زیر استفاده نمایید:

اما در صورتی که اشنایی ندارید بهتر است تا ابتدا از آموزش های php در سایت استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # ali_021 1394-05-03 22:15
سلام return false چه معنی میده
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # amirkian 1394-05-05 12:00
وقتی که تابع به مقدار return میرسد از حلقه خارج میشود و مقدار خروجی را بر میگرداند
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # احسان عباسی 1394-05-03 22:44
مقدار false را برمی گرداند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # moji 1393-12-19 15:08
لطف میکنید این شرط رو توضیح بدید( if (atpos
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # مظاهر نصوحی 1393-12-20 08:02
در کد ; ("@")var atpos=x.indexOf متغیر atpos تعریف شده است و همزمان در این خط کد این متغیر با ("@")x.indexOf مقدار دهی شده است. همانگونه که در آموزش مربوط به رشته ها در لینک http://beyamooz.com/javascript/128-object/399 توضیح داده ایم، تابع indexOf مکان شروع آرگومان رشته ی ارسالی ("@")را در رشته x بر می گرداند. در مثال زیر اجرای این تابع عدد 5 را بر می گرداند زیرا @ ششمین کاراکتر رشته ی x می باشد:
var x = [email protected]
نکته: اولین کاراکتر دارای اندیس 0 می باشد.
در مثال بالا گفته ایم اگر هر یک از موارد زیر رخ داد، آدرس ایمیل صحیح نمی باشد:
1- @ یا وجود نداشد یا اولین کاراکتر ایمیل بود. (اگر @ وجود نداشته باشد تابع indexOf عدد -1 را بر می گرداند.)
2- lastIndexOf آخرین باری که کاراکتر "." در رشته آمده است را بر می گرداند. آخرین "." می بایست حداقل دو کاراکتر بعد از @ باشد و الا ایمیل صحیح نیست. که این موضوع با شرط dotpos<atpos +2 بررسی شده است.
3- در نهایت می بایست مطمئن شویم که بعد از آخرین نقطه حداقل یک کاراکتر آمده باشد. این کار را با شرط dotpos+2<=x. length بررسی می کنیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # میلاد نظری 1393-11-26 11:25
واقعا عالی بود ممنونم...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # mohsen moardi 1393-10-13 13:35
ممنونم...خسته نباشيد...درمورد مثالي ك براي فيلد هاي الزامي زديد سوال داشتم.اگه ب جاي return false...از return true استفاده شه چي ميشه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1393-10-14 07:18
در این صورت فرم submit خواهد شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # محسن_م 1392-12-23 22:12
ممنون لطفا ادامه بدید..........
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی JavaScript

بستن
مدرس:
سوال و جواب:

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی