اعتبارسنجی فرم ها در JavaScript
اعتبارسنجی (Validation) فرم ها در JavaScript
از JavaScript می توان برای اعتبار سنجی فرم ها، قبل از اینکه به سرور ارسال شود استفاده نمود.
فرم های داده ای که توسط JavaScript اعتبارسنجی می شوند به صورت معمول می تواند شامل موارد زیر باشد:
- آیا فیلدهای الزامی (ستاره دار) پر شده است؟
- آیا کاربر آدرس ایمیل را به فرمت صحیح وارد کرده است؟
- آیا کاربر، داده صحیح را وارد کرده است؟
- آیا کاربر در یک فیلد عددی، فقط کاراکترهای عددی را وارد کرده است؟
فیلدهای الزامی (Required)
تابع زیر، خالی بودن فیلد را چک می کند. اگر خالی باشد، پیغام "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;
}
}
{
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>
خودتان امتحان کنید »First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
اعتبار سنجی ایمیل (E-mail Validation)
تابع زیر، فرمت معمول آدرس ایمیل را چک می کند.
فرمت صحیح آدرس ایمیل شامل موارد زیر است:
- باید شامل یک علامت "@" باشد.
- باید حداقل یک نقطه (.) داشته باشد باشد.
- علامت "@" نباید اولین کاراکتر باشد.
- آخرین نقطه، باید بعد از علامت "@" ظاهر شود.
- بعد از آخرین نقطه باید حداقل 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;
}
}
{
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>
خودتان امتحان کنید »Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 38552
دیدگاه‌ها
سلام. راهنمایی در زمینه اعتبار سنجی اعداد ، مثلا در فرم استخدام سن نباید بیشتر از 28 سال باشد . قصد دارم این فرم را بوسیله جاوا اسکریپت درست کنم ولی نمیدونم چجوری این اعتبار سنجی عدد را در کد جاوا اسکریپت بنویسم که اگر سن را بیشتر از 28 زدم اجازه ثبت نام ندهد. لطفا کمک کنید که چگونه این کد دستوری را بنویسم.
سلام، با استفاده از کد زیر، سن باید بین 20 تا 28 وارد شود وگرنه کاربر با پیام خطا مواجه خواهد شد:
beyamooz.com/try_it_yourself/tryit.php?filename=js_validat-old
با سلام و تشکر از سایت بسیار خوبتون
در قسمت اعتبار سنجی ایمیل شرط if رو متوجه نشدم
ممنون میشم توضیح مختصری در این مورد بدید
سلام.
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;
}
در کدهای بالا، در خط اول، متغیر atpos اندیس علامت @ را در رشته ی ایمیل وارد شده به دست می آورد. و در خط دوم، متغیر dotpos اندیس
آخرین نقطه ی درون رشته ی ایمیل را به دست می آورد.
در خط سوم، یعنی همان دستور if، همان طور که می دانید علامت || به معنی "یا" است. و در شرط دستور if چند سه شرط وجود داره که اگه هرکدوم
از اونها برقرار باشن، ایمیل داده شده معتبر نیست. و یک پیغام خطا نشون داده میشه و مقدار false برگردونده میشه. که عبارتند از:
1. عبارت atpos<1 اگه true باشه یعنی اندیس علامت @ برابر با 0 است و یعنی این علامت در ابتدای آدرس ایمیل قرار داره که یک خطا هست.
2. عبارت dotpos<atpos +2 یعنی آخرین نقطه ی آدرس ایمیل، قبل از علامت @ باشه. که یک خطا هست(به مورد شماره 4 در توضیحات دقت کنید).
3. عبارت dotpos+2>=x. length یعنی آخرین نقطه ی ایمیل اگر حداقل دو کاراکتر قبل از انتهای ایمیل نبود، مقدار false را نشان بده که خطا تولید
شود. در حقیقت باید dotpos<x.len gth-2 باشد. یعنی نقطه ی ما، دو کاراکتر قبل از انتهای ایمیل باشد.
سلام خسته نباشید
لطفا میشه جواب سوالمو بدید
تو اعتبارسنجی ایمیل atpos و dotpos که تو کد اومدن چین؟ توضیح میشه بدین؟ متوجه نشدم و به توضیحات نیاز دارم چون دقیقا رو این موضوع گیر کردم.
var atpos=x.indexOf("@");
var dotpos=x.lastIn dexOf(".");
سلام، atpos و dotpos دو متغییر با نام دلخواه است که تعریف شده و قراره که محل قرارگیری علامت (@) و علامت (.) رو درشون ذخیره کنیم.
سلام با تشکر از سایت خوبتون
چطور میشه تعداد کاکتر هایی رو که توی پنجره باز شده مینویسیم سنجید؟
سلام و خسته نباشید.
میخوام بدونم الان این درس رو درست متوجه شدم یا خیر.
ویژگی onsubmit به همراه تگ form میاد و کارش اینه که وقتی کلید ارسال اطلاعات رو میزنیم یک تابع اسکریپتی رو فراخوانی کنه. این تابع هم دو تا کار میتونه انجام بده:
1- پیغامی رو بعد از ارسال اطلاعات به کاربر بده که معمولا پیغام ارسال موفقیت آمیز اطلاعات هست.
2-اطلاعات رو قبل از ارسال چک کنه تا در صورت درست بودن اطلاعات اونها رو ارسال کنه.
مورد اول که چیز خاصی نداشت. اما مورد دوم ویژگی onsubmit تابع مورد نظر رو با کلمه return آورده. از اونجایی که تابع ذکر شده در مثال خروجیش مقدار true یا false هست ، آیا به کار بردن این ویژگی به صورت onsubmit="retur n validateFom()" p به این معنی میشه که مقدار نهایی این تابع اگر true باشد فرم ارسال گردد و اگر false باشه فرم ارسال نشه؟ یعنی میخوام کاربرد کلمه return رو در ویژگی onsubmit مطمعن بشم که کاربردش چیه.
من مقادیر فرم هامو سمت سرور اعتبار سنجی میکنم .میخوام وقتی برمیگرم به صفحه فرم تا کاربر خطارو مشاهده کنه مقادیری که قبلا درست وارد کرده رو مجبور نشه دوباره وارد کنه ...
چجوری این کارو با جاوا اسکریپت انجام بدم ؟؟
سلام، یه سوال دستور return false به تابع validateform برگشت داده میشه؟
سلام
لطفا به کد 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) نخواهد شد.
سلام ، خسته نباشید
شما در بخش " اعتبار سنجی ایمیل (E-mail Validation) " در بخشی که کد های جاوا اسکریپت رو نوشتید ، نوشتین که :
if (atpos
با سلام و تشکر
کدهاتون کامل نیومده!!!
سلام ، خسته نباشید
شما در بخش " اعتبار سنجی ایمیل (E-mail Validation) " در بخشی که کد های جاوا اسکریپت رو نوشتید ، نوشتین که :
if (atpos
با سلام و خسته نباشید.
کدها کامل نیومده!!!
در بارگذاری کدها به علامت‌های > و < دقت کنید. برای علامت > عبارت ;lt& و برای علامت < عبارت ;gt& رو بذارید.
سلام
میخواستم یه کد بنویسم که چک کنه اگه جاوا اسکریپت مرور گر غیر فعاله خودش فعال کنه.
یا اگه جاوا اسکریت غیر فعال بود دکمه ثبت نام غیر فعال بشه
خواهشا زود جواب بدهید خیلی فوریه.با تشکررررررر
با سلام.
میشه توسط تگ 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>
ولی اینکه بشه این قابلیت رو از طریق کد فعال یا غیر فعال کرد رو باید از طریق مرورگر انجام بدید. فکر نمی‌کنم از طریق کد بشه. چون به لحاظ امنیتی مشکل داره.
میشه با جاوا اسکریپت شرط گذاشت اگه جاوا اسکریپت مرورگر غیر فعاله به صفحه دیگه منتقل شه.با تشکررر
می تونید از تگ noscript استفاده کنید. این تگ زمانی کار می‌کنه که جاوااسکریپت فعال نباشه...
می‌تونید تو این تگ یه نشانه‌ای بذارید مبنی بر اینکه جاوااسکریپت غیر فعاله.
در قسمت NoScript این کارو انجام بدید و از اسکریپت های جاوااسکریپت استفاده کنید و نتیجه رو به من هم بگید که ببینم میشه یا نه :)
سلام اشکال کد زیر چیه ؟ پیام های مربوط به @ بعد از تصحیح فیلد هنوز نمایش داده میشه بعد سابمیت میشه
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:
با سلام.
ظاهرا مشکلی تو کد نیست...
تو مفهوم کد مشکلی نیست. شما باید نحوه نمایش خطا رو تصحیح کنید. جلوی کنترل مربوط یه تگ span با id خاصی بذارید و در صورت خطا اون رو پر کنید.
نکته‌اش این هست که اول تابع هم این span ها رو خالی باید کنید.
به نقل از مهرداد صلاحی:
چطوری خطا رو خالی کنم
document.getEl ementById("addr essid").innerHT ML=" "
کد بالا رو به تابع اضافه کنم درسته؟یا روشدیگری هم هست
نکته‌اش این هست که اول تابع هم این span ها رو خالی باید کنید.
درسته. می‌تونید فاصله هم نذارید و فقط دو تا دابل‌کوتیشن بذارید.
بله نکته‌اش این که با هر بار اجرا فرم دوباره چک میشه. پس باید ابتدا خطا‌های قبلی پاک بشه و بعد از چک شدن اگه خطا داشت دوباره نمایش داده بشه و اگه خطا نداشت، که هیچی.
برای این که دو تابه رو مقدارش رو به فرم برگردونیم بایدچ کار کنیم ؟؟
این خط کد ارور میداد!!!!!
سلام.
متن خطا رو بذارید تا بشه راهنمایی کرد.
با سلام
چطور می توان :
1 - یک textbox ایجاد کرد که فقط عدد در ان وارد شود؟
2 - یک textbox ایجاد کرد که بیشتر از 4 کارکتر در ان وارد نشود ؟
با تشکر
سلام
1- برای انجام این کار چندین راه وجود دارد اما ساده ترین آنها استفاده از پلاگین های jQuery است، برای این منظور به آدرس زیر مراجعه فرمایید:
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 به لینک زیر مراجعه کنید:
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
سلام
من فرم ثبت نام ساختم ولی نمیدونم چجوری می تونم بعد از ثبت نام عبارت ثبت نام انجام شد رو بهش اضافه کنم لطفا منو راهنمایی کنید
با سلام
آیا اتصال با پایگاه داده و ذخیره اطلاعات ارسالی در پایگاه داده را هم تنظیم کرده اید؟
اطلاعاتی که در یک فرم نوشته می شوند باید در پایگاه داده ذخیره شوند. پس برای مورد مطرح شده می بایست چک کنید در صورتی که این اطلاعات در پایگاه داده درج شده باشد عبارت ثبت نام انجام شد نمایش داده شود. در صورتی که با کد نویسی php آشنایی دارید می توانید برای نمونه از تصویر زیر استفاده نمایید:
اما در صورتی که اشنایی ندارید بهتر است تا ابتدا از آموزش های php در سایت استفاده کنید.
سلام return false چه معنی میده
وقتی که تابع به مقدار return میرسد از حلقه خارج میشود و مقدار خروجی را بر میگرداند
مقدار false را برمی گرداند.
لطف میکنید این شرط رو توضیح بدید( if (atpos
در کد ; ("@")var atpos=x.indexOf متغیر atpos تعریف شده است و همزمان در این خط کد این متغیر با ("@")x.indexOf مقدار دهی شده است. همانگونه که در آموزش مربوط به رشته ها در لینک 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 بررسی می کنیم.
واقعا عالی بود ممنونم...
ممنونم...خسته نباشيد...درمورد مثالي ك براي فيلد هاي الزامي زديد سوال داشتم.اگه ب جاي return false...از return true استفاده شه چي ميشه؟
در این صورت فرم submit خواهد شد.
ممنون لطفا ادامه بدید..........