کد بررسی ایمیل در فرم ها با جاوا اسکریپت
امروز کدی رو توضیح میدیم که کارش اینه که تو فیلد ایمیل عبارت ورودی رو بررسی می کنه در صورتی که به شکل
[email protected] نباشد به کاربر هشدا دهد
کد کلی
[HTMLS]<!DOCTYPE html><html>
<head>
<script>
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("آدرس ايميل وارد شده صحيح نميباشد");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
ايميل: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
[/HTMLS]
اما توضیح خط به خط کد های جاوا اسکریپت بالا
کل کد جاوا اسکریپت در کد بالا کد زیر هست:
[JSS]<script>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("آدرس ايميل وارد شده صحيح نميباشد");
return false;
}
}
</script>[/JSS]
خط اول این کد عبارت [HTMLS]function validateForm()[/HTMLS] هست که کارش تعریف یک تابع به نام validateForm (نام تابع دلخواه است می توان تغییر داد)هست که هیچ آرگومانی برای ورودی نمیگیره ...
خط دوم این کد عبارت [HTMLS]var x=document.forms["myForm"]["email"].value;[/HTMLS] هست که کارش تعریف یک متغییر به نام x هست که مقدارش برابر مقدار فیلد email از فرم myForm هست...
خط سوم این کد عبارت [HTMLS]var atpos=x.indexOf("@");[/HTMLS] هست که یک متغییر به نام atpos تعریف می کنه و مقدارش برابر تعداد کاراکتر ها تا قبل کاراکتر @ از مقدار متغییر x هست...
لازمه که اینجا یه توضیح در مورد x.indexOf("@") یه توضیحی داده بشه
توضیح تابع [HTMLS]indexOf()[/HTMLS]
این تابع محل کاراکتر خاصی رو در یک رشته مشخص می کنه (چندمین کاراکتر از یک رشته)
قابل ذکره این تابع اولین بار که کلمه یا کاراکتر مورد نظر رو ببینه نتیجه رو نشون میده
یک مثال از تابع [HTMLS]indexOf()[/HTMLS]
[HTMLS]<!DOCTYPE html><html dir=rtl>
<body>
<p>با کلیک بر روی دکمه زیر تعداد کاراکتر های قبل از کلمه خوش آمدید رو بهتون میگه</p>
<p>سلام دنیا، به دنیای دیجیتالی خوش آمدید!</p>
<p id="demo"></p>
<button onclick="myFunction()">کلیک کن</button>
<script>
function myFunction()
{
var str="سلام دنیا، به دنیای دیجیتالی خوش آمدید!";
var n=str.indexOf("خوش آمدید");
document.getElementById("demo").innerHTML=n;
}
</script>
</body>
</html>[/HTMLS]
با کلیک کردن دکمه تابع جاوا اسکریپت صدا زده میشه و این تابع رشته "سلام دنیا، به دنیای دیجیتالی خوش آمدید!" رو شروع می کنه به شمارش تا وقتی به کلمه خوش آمدید برسه وقتی رسید تعداد کاراکتر های قبلش رو چاپ می کنه...
خوب بریم سراغ ادامه توضیحات کد های برنامه اصلی این پست
خط چهارم این کد عبارت [HTMLS]var dotpos=x.lastIndexOf(".");[/HTMLS] هست که یک متغییر به نام dotpos تعریف می کنه و مقدارش برابر تعداد کاراکتر ها تا قبل کاراکتر . از مقدار متغییر x هست...
توضیح تابع [HTMLS]lastindexOf()[/HTMLS]
این تابع کاراکتر های قبلی ( یا به طور دیگه مکان ) کاراکتر خاصی رو حساب می کنه
قابل توجه است که این تابع آخرین باری که کاراکتر خاص رو در رشته پیدا می کنه رو حساب می کنه
برای دریک این یک مثال میزنیم
[HTMLS]<!DOCTYPE html><html dir=rtl>
<body>
<p>با کلیک بر روی دکمه زیر تعداد کاراکتر های قبل از کلمه خوش آمدید رو بهتون میگه</p>
<p>سلام دنیا خوش آمدید به سایت مجید آنلاین، به دنیای دیجیتالی خوش آمدید!</p>
<p id="demo"></p>
<button onclick="myFunction()">کلیک کن</button>
<script>
function myFunction()
{
var str="سلام دنیا خوش آمدید به سایت مجید آنلاین، به دنیای دیجیتالی خوش آمدید!";
var n=str.lastIndexOf("خوش آمدید");
document.getElementById("demo").innerHTML=n;
}
</script>
</body>
</html>[/HTMLS]
خوب ادامه توضیح کد اصلی
خط پنجم این کد عبارت [HTMLS]if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)[/HTMLS] که یک شرط رو بررسی می کنه میگه اگه مقدار متغییر atpos کمتر از 1 هست یا مقدار dotpos کمتر مجموع مقدار atpos بعلاوه بر 2 هست یا مقدار dotpos بعلاوه دو بیشتر مساوی تعداد کاراکتر های متغییر x هست (کافیه فقط یکی از این شرط ها برقرار باشه چون بینشون یا هست )
خط شیشم کد عبارت [HTMLS] alert("آدرس ايميل وارد شده صحيح نميباشد");[/HTMLS] که عبارت "آدرس ايميل وارد شده صحيح نميباشد" رو وقتی شرط برقرار باشد نمایش میدهد
خط هفتم کد عبارت [HTMLS] return false;[/HTMLS] که این کد باعث میشه از حلقه (لوپ) شرط بپره بیرون و باعث نشه که پش سر هم هشدار رو نشون بده
امید وارم که این توضیحات بدردتون بخوره