article

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

javascript-form-validation

یکی از موارد کاربردی استفاده از جاوا اسکریپت (javascript) در صفحات وب، اجرای توابع در هنگام کار با عناصر فرم های وب در سمت کاربر (مرورگر) است، به فرض وقتی کاربر در حال تکمیل اطلاعاتی در یک فیلد می باشد، می توان همزمان یا بعد از اینکه بر روی دکمه ارسال کلیک نمود، با اجرای یک رویداد و فراخوانی توابع جاوا اسکریپتی، از معتبر بودن اطلاعات تکمیل شده تا حدود زیادی اطمینان حاصل کرد و در صورت غیر معتبر بودن مقادیر، به شیوه های مختلف کاربر را جهت تکمیل موارد مورد نیاز راهنمایی نمود، از این رو در این آموزش هدف این است که چند روش کاربردی و در عین حال خلاقانه اعتبار سنجی فرم های وب با جاوا اسکریپت را با هم بررسی کنیم.

منظور از اعتبار سنجی چیست؟


قبل از پرداختن به ادامه آموزش، ذکر این نکته لازم است که منظور از اعتبار سنجی در فرم های وب، یعنی بررسی معتبر بودن اطلاعاتی که کاربر در آنها وارد کرده است با مقادیر مورد انتظار ما، یا به فرض عدم اجازه ارسال فرم های خالی، به طور مثال هنگامی که کاربر بدون تکمیل فیلدهای مورد نیاز و ضروری، قصد ارسال فرم را دارد، پیام هشداری به او نشان داده شود، یا اگر در فیلدی ایمیل خود را وارد کرده و این ایمیل سهوا یا عمدا بدون علامت @ درج شده باشد، این موضوع قبل از ارسال فرم، به اطلاع او برسد، البته اعتبار سنجی در وب می تواند به طور کلی در دو مرحله صورت گیرد، در سمت کاربر (در مرورگر) و همچنین در سمت سرور (با برنامه نویسی سمت سرور مثل php ,asp و...) ترکیبی از این روش ها نیز با استفاده از فناوری آژاکس (ajax) امکان پذیر است که در این رابطه پیش تر در بخش آموزش های  آژاکس (ajax) صحبت کرده ایم.

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


شاید در ذهن شما این سوال باشد که کدام شیوه اعتبار سنجی در وب بهتر است، اعتبار سنجی سمت کاربر و در مرورگر یا اعتبار سنجی سمت سرور؟ پاسخ این است که به جهت اطمینان بخشی، اعتبار سنجی سمت سرور مطمئن تر و بهتر است، چرا که اعتبار سنجی سمت کاربر متکی بر امکانات مرورگر است، به فرض اگر به هر دلیل جاوا اسکریپت پشتیبانی نشود یا غیر فعال باشد، این نوع اعتبار سنجی عمل نخواهد کرد، اما اعتبار سنجی سمت سرور در هر شرایطی عمل می کند مگر اینکه خودتان بخواهید آن را تغییر دهید، شاید با این تفسیر این سوال به ذهن خطور کند که پس لزوم استفاده از اعتبار سنجی با جاوا اسکریپت چیست؟ اگر چه پیش از این گفتیم که ممکن است تمام مرورگرها از جاوا اسکریپت پشتیبانی نکنند (مثلا جاوا اسکریپت توسط کاربر غیر فعال شده باشد یا به فرض در مورد ارسال هرزنامه توسط ربات های خزنده و...)، اما در اکثر موارد این طور نیست، لذا برای افزایش قابلیت های تعاملی برنامه خود و راهنمایی کاربران در هنگام پر کردن فرم های وب، همچنان می توان علاوه بر اعتبار سنجی سمت سرور، از جاوا اسکریپت نیز در کنار آن استفاده کرد، نتیجه اینکه هیچ گاه نباید تنها متکی بر جاوا اسکریپت باشیم، بلکه در کنار برنامه نویسی سمت سرور، می توانیم از جاوا اسکریپت نیز استفاده کنیم.

بررسی خالی نبودن یک فرم و نمایش پیام هشدار با alert


اولین موردی که در کار با فرم های وب و بررسی اعتبار آنها به ذهن خطور می کند، اطمینان از خالی نبودن محتوای ارسالی است، بدین منظور ابتدا لازم است که یک تابع در جاوا اسکریپت داشته باشیم که در هنگام ارسال فرم، خالی نبودن مقادیر value فیلد را بررسی کند.
<script type="text/javascript">
<!--
function validateForm(){
var field = document.forms["form-1"]["name-1"].value;
if (field == null || field == ""){
    alert("فیلد نام نباید خالی باشد");
    return false;
  }
}
//-->
</script>
توضیح:
- این تابع ساده، ابتدا مقادیر فیلد فرضی name-1 را از فرمی با نام form-1 دریافت می کند.
- سپس با یک دستور شرطی ساده if، بررسی می کند که متغیر field که در واقع مقادیر value فیلد name-1 است، خالی یا null نباشد.
- اگر فیلد خالی باشد، پس نتیجه بررسی ما true شده و با یک دستور alert، پیامی به کاربر نشان داده می شود، با return false نیز حالت پیش فرض مرورگر نادیده گرفته شده و از ارسال مقادیر فرم جلوگیری می شود.
تابع بالا را می توان به فرض در هنگام ارسال یک فرم html به شکل زیر فراخوانی نمود.
<form name="form-1" action="#" method="post" onsubmit="return validateForm();">
<input type="text" name="name-1" />
<input type="submit" value="ارسال" />
</form>
پیش نمایش مثال ها را می توانید در انتهای این صفحه ملاحظه کنید.
توضیح:
- همانطور که ملاحظه می کنید، عبارت form-1 در واقع اسم فرم و name-1 عنوان فیلد مورد نظر است.
- رویدادی که در اینجا از آن برای فراخوانی تابع جاوا اسکریپتی استفاده کرده ایم، onsubmit است که به تگ form آن را نسبت داده ایم.
- این نوع اعتبار سنجی تنها در صورتی عمل می کند که در فرم html از دکمه با type submit برای ارسال فرم استفاده شود، که در قالب موارد همین طور است.

اعتبارسنجی فرم با رویداد onblur و innerHTML


یک شیوه دیگر اعتبار سنجی فرم های وب که برعکس مورد بالا، می تواند به طور همزمان با پر کردن فرم توسط کاربر مورد استفاده قرار گیرد، فراخوانی تابع جاوا اسکریپت با رویداد onblur است، رویداد onblur در واقع به معنی زمانی است که کاربر ابتدا در فرم کلیک یا به اصطلاح focus کرده و سپس در فیلدی دیگر یا در فضای خالی صفحه کلیک می کند، در این حالت رویداد onblur رخ می دهد، از خاصیت innerHTML نیز برای نمایش یک پیام در بلاک div با id مشخص یا دریافت مقادیر از آن استفاده می شود.
فرم html شامل دو فیلد فرضی نام و نام خانوادگی جهت نمونه:
<form name="form-2" action="#" method="post">
<input type="text" name="name-2" id="name-2" onblur="CheckEmpty();" />
<div id="name-error" class="error"></div>
<br />
<input type="text" name="family-2" id="family-2" onblur="CheckEmpty();" />
<div id="family-error" class="error"></div>
</form>
توضیح:
- به دلیل استفاده از خاصیت innerHTML و document.getElementById در تابع CheckEmpty و به این دلیل که مقادیر آرگومان های تابع در خود آن تعریف شده اند، این بار باید کد جاوا اسکریپت را بعد از فرم قرار دهیم تا مقادیر بلاک و فیلد مورد نظر با خاصیت getElementById در دسترس باشد (اگر کد جاوا اسکریپت را قبل از فرم قرار دهید، تابع عمل نخواهد کرد).
- در فرم فرضی بالا دو فیلد با نام های name-2 و family-2 داریم که برای هر کدام از آنها با رویداد onblur تابع CheckEmpty را فراخوانی می کنیم.
- اگر دقت کرده باشید، دو بلاک div با id فرضی name-error و family-error را تنظیم کرده ایم که به هنگام فراخوانی تابع CheckEmpty، اگر مقادیر فیلدها خالی باشد، خطای مورد نظر ما را در خود نشان می دهند، برای سفارشی سازی نحوه نمایش خطا نیز از css و کلاس error استفاده کرده ایم.
تابع جاوا اسکریپت جهت اعتبار سنجی فرم بالا:
<script type="text/javascript">
<!--
function CheckEmpty(){
    if(document.getElementById('name-2').value === ''){
        document.getElementById('name-error').innerHTML = 'لطفا نام خود را وارد کنید!';
        return false;
        }
    else{
        document.getElementById('name-error').innerHTML = '';
    }
    if(document.getElementById('family-2').value === ''){
        document.getElementById('family-error').innerHTML = 'لطفا نام خانوادگی خود را وارد کنید!';
        return false;
        }
    else{
        document.getElementById('family-error').innerHTML = '';
    }
    return true;
}
//-->
</script>
توضیح:
- اتفاقی که در این تابع به ظاهر پیچیده می افتد بسیار ساده است، پس از فراخوانی تابع با رویداد onblur ابتدا با دستور شرطی if مقادیر فیلد name-2 توسط خاصیت getElementById و value دریافت می شود.
- اگر این مقادیر برابر با خالی بود، به بلاک div با id فرضی name-error متن خطا ارسال می شود (با کمک خاصیت innerHTML)؛ آنگاه تابع با برگرداندن مقادیر false به پایان می رسد.
- قسمت مربوط به else در تابع بالا در صورتی اجرا می شود که مقادیر فیلدها خالی نباشد، لذا با اجرا شدن این قسمت، پیامی که پیش تر آن را نمایش داده بودیم، محو می شود.

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


قدرت زبان جاوا اسکریپت این اجازه را به ما می دهد که تقریبا هر آنچه را که بخواهیم، در سمت کاربر اعتبار سنجی کنیم، یکی از پرکاربرد ترین این موارد، اعتبار سنجی فرم های مربوط به ایمیل است که معمولا برخی کاربران بیشتر سهوا و کم تر عمدا آنها را به طور صحیح تکمیل نمی کنند، تابع زیر در هنگام ارسال فرم، یک هشدار به چنین کاربرانی نشان می دهد.
<script type="text/javascript">
<!--
function emailValidate(formid,email) {
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    var address = document.forms[formid].elements[email].value;
    if(reg.test(address) == false) {
        alert('آدرس ایمیل وارد شده نامعتبر است');
        return false;
   }
}
//-->
</script>
توضیح:
- تابع بالا مبتنی بر دو عنصر کلیدی است، یک استفاده از عبارات با قاعده (Regular Expressions) و دوم استفاده از خاصیت test در جاوا اسکریپت.
- با استفاده از عبارات با قاعده یک الگوی مورد انتظارمان را تعریف می کنیم، در اینجا الگویی از یک ایمیل در حالت معمول تعریف شده است، سپس با متد test بررسی می کنیم که آیا مقادیر فرم ایمیل ما با الگوی مورد انتظار تطابق دارد یا خیر، اگر جواب منفی باشد، test مقادیر false را برمی گرداند و در نتیجه قسمت داخل دستور شرطی if اجرا شده و پیام هشدار نشان داده می شود، همانطور که پیش تر گفتیم return false نیز مانع ارسال فرم می شود.
- نکته حائز اهمیت، نحوه تنظیم و فراخوانی صحیح این تابع است، در هنگام فراخوانی تابع، به یاد داشته باشید که id فرم و فیلد مورد نظر را داخل علامت '' قرار دهید، در غیر اینصورت تابع به درستی عمل نخواهد کرد.
فرم html برای ارسال ایمیل:
<form name="form-3" id="form-3" action="#" method="post" onsubmit="return emailValidate('form-3','email');">
<input type="text" name="email" id="email" />
<input type="submit" value="ارسال" />
</form>
برای دیدن پیش نمایش کد، به انتهای این آموزش مراجعه کنید.

اعتبار سنجی وجود حروف و اعداد خاص با جاوا اسکریپت


روش دیگری برای اعتبار سنجی مقادیر وارد شده توسط کاربر در فیلدها، بررسی وجود حروف و کاراکترهای خاص در آن است، به فرض اگر قرار باشد که در یک فرم تنها از اعداد یا تنها از حروف خاصی استفاده شود، این روش کاربرد خواهد داشت، به مثال زیر توجه کنید.
<script type="text/javascript">
//<![CDATA[
function checkChar(string){
    validChar='ABCDEF';
    strlen=string.length;
    if(strlen<1){
        alert('لطفا یک عبارت وارد کنید');
        return false;
    }
    string=string.toUpperCase();
    for(i=0;i<strlen;i++){
        if(validChar.indexOf(string.charAt(i))<0){
            alert("تنها کارکترهای A,B,C,D,E,F مجاز هستند");
            return false;
    }
  }
  alert('فرم شما ارسال شد');
  return true;
}
//]]>
</script>
توضیح:
- در تابع بالا ابتدا کاراکترهای مجاز را در متغیر validChar تعریف می کنیم.
- سپس در متغیر strlen با استفاده از خاصیت length، اندازه مقادیر وارد شده در فیلد را بررسی می کنیم، اگر این اندازه کوچکتر از 1 باشد، یعنی کاربر بدون وارد کردن عبارتی در فرم، قصد ارسال آن را دارد و لذا به او پیام هشداری نشان می دهیم.
- در غیر این صورت مقادیر متغیر string که در واقع همان محتوای دریافتی از فیلد فرم در هنگام فراخوانی تابع است را با تابع درونی toUpperCase به حروف بزرگ تبدیل می کنیم (برای جلوگیری از حساس بودن به حروف بزرگ و کوچک).
- بخش پایانی تابع نیز که نقشی کلیدی در عملکرد آن دارد، با یک حلقه for به تعداد اندازه طول رشته ورودی کاربر، تک تک حروف ارسالی را با مقادیر validChar مقایسه می کنیم، اگر حروف ارسالی در الگوی ما وجود نداشته باشند، پیام هشداری به کاربر نشان داده خواهد شد.
- تطبیق وجود کاراکتر ارسالی با الگوی تعریف شده، با خاصیت indexOf و charAt انجام می شود، indexOf در واقع یک عدد را با توجه به موقعیت ابتدایی یک کاراکتر خاص در رشته ارسالی برمی گرداند، منظور از موقعیت، این است که ببینیم کاراکتر یا عبارت مورد نظر ما، چندمین حرف از رشته ارسالی است (شمارش indexOf از صفر شروع شده و شامل فواصل خالی هم می شود)، به طور مثال:
<script type="text/javascript">
var string = "welcome to javascript learning.";
var check=string.indexOf("javascript");
document.write(check);
</script>
کد بالا عدد 11 را برمی گرداند، چرا که ما عبارت javascript را جهت بررسی به متغیر check نسبت داده ایم؛ با دقت در رشته welcome to javascript learning نتیجه می گیریم که پیش از عبارت javascript با احتساب فواصل خالی و شمارش از صفر، 10 کاراکتر وجود دارد؛ اگر به فرض در رشته ارسالی دو عبارت تحت عنوان javascript باشد، خاصیت indexOf با تطبیق اولین الگو نتیجه را برمی گرداند و به ادامه رشته ترتیب اثر نمی دهد، اگر هیچ کاراکتری تطبیق داده نشود، indexOf عدد 1- را برمی گرداند.
متد charAt نیز با توجه به عددی که برای مقادیر آن در نظر می گیریم، از ابتدای رشته شمارش را به تعداد مقادیر شروع کرده و کاراکتر انتهایی را به عنوان نتیجه برمی گرداند، شمارش charAt نیز از صفر شروع شده و شامل فواصل خالی نیز می شود، به فرض مثال زیر حرف j را برمی گرداند:
<script type="text/javascript">
var string = "welcome to javascript learning.";
var check=string.charAt(11);
document.write(check);
</script>
فرم html و فراخوانی تابع:
<form id="form-4" action="#" method="post" onsubmit="return checkChar(document.getElementById('chars').value);">
<input type="text" name="chars" id="chars" />
<input type="submit" value="ارسال" />
</form>
توضیح:
- فراخوانی این تابع کمی متفاوت است، در هنگام فراخوانی باید مقادیر فیلد مورد نظر را نیز به عنوان آرگومان با document.getElementById و value دریافت و ارسال کنیم.

اعتبار سنجی تعداد حروف مجاز در هنگام پر کردن فیلد


تابع دیگری که در پایان این مطلب قصد بررسی آن را داریم، بسیار ساده اما کاربردی است، در این روش اعتبار سنجی با شروع نوشتن کاربر، تعداد حروف مجاز باقی مانده در قسمتی به او نشان داده می شود، به فرض اگر حداکثر کاراکتر مجاز در یک فیلد، 100 باشد، با افزودن کاراکتر به فیلد مورد نظر، به صورت معکوس مقدار کاراکتر باقی مانده را به کاربر نشان می دهیم.
<script type="text/javascript">
//<![CDATA[
function countChars(usertext, counter, max) {
    var count = max - document.getElementById(usertext).value.length;
    if (count < 0) {
        document.getElementById(counter).innerHTML = "<span style=\"color: red;\">" + count + "</span>";
    }
    else {
        document.getElementById(counter).innerHTML = count;
    }
}
//]]>
</script>
توضیح:
- در این تابع چند خاصیت  getElementById، length و  innerHTML به کار رفته است.
- با هربار فراخوانی تابع (با رویداد onfocus, onkeyup و onkeydown)، مقادیر فیلد فرضی usertext دریافت شده و طول رشته آن با length سنجیده می شود، آنگاه اگر آرگومان max که حداکثر سقف مجاز کاراکتر است را از میزان کاراکتر فعلی (که کاربر در فیلد وارد کرده است) کم کنیم و حاصل، کوچکتر از صفر باشد، نتیجه به رنگ قرمز به کاربر نشان داده می شود (با استفاده از span و style).
فراخوانی تابع و فرم html:
<form id="form-5" action="#" method="post">
<textarea name="usertext" id="usertext" rows="6" cols="50" onfocus="countChars('usertext','char_count',10)" onkeydown="countChars('usertext','char_count',10)" onkeyup="countChars('usertext','char_count',10)">
</textarea>
</form>
توضیح:
- در مثال بالا، در یک فیلد از نوع textarea با سه رویداد  onfocus, onkeyup و onkeydown تابع خود را فراخوانی می کنیم، یعنی هنگامی که کاربر در فیلد کلیک می کند، هنگامی که یک دکمه را فشار می دهد و هنگامی که دکمه را رها می کند.

کد و پیش نمایش آنلاین


کد توابع و مثال های بالا و پیش نمایش آنها را می توانید به صورت آنلاین در زیر ملاحظه و بررسی کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | اعتبار سنجی فرم های html با javascript</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    direction:rtl;
    font-size:12px;
}
.error{
    display:block;
    height:auto;
    width:auto;
    padding:4px;
    color:#C00;
}
</style>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!<br />
</noscript>
استفاده از alert و رویداد onsubmit برای نمایش یک پیام هشدار. (بدون پر کردن فیلد زیر، بر روی دکمه ارسال کلیک کنید.)
<br />
<br />
<script type="text/javascript">
<!--
function validateForm(){
var field = document.forms["form-1"]["name-1"].value;
if (field == null || field == ""){
    alert("فیلد نام نباید خالی باشد");
    return false;
  }
}
//-->
</script>
<form name="form-1" action="#" method="post" onsubmit="return validateForm();">
<input type="text" name="name-1" />
<input type="submit" value="ارسال" />
</form>
<hr />
<br />
استفاده از رویداد onblur و innerHTML برای نمایش پیام هشدار. (ابتدا در یک فیلد کلیک کرده و بدون پر کردن آن، در فیلد بعدی کلیک کنید.)
<br />
<br />
<form name="form-2" action="#" method="post">
<input type="text" name="name-2" id="name-2" onblur="CheckEmpty();" />
<div id="name-error" class="error"></div>
<br />
<input type="text" name="family-2" id="family-2" onblur="CheckEmpty();" />
<div id="family-error" class="error"></div>
</form>
<script type="text/javascript">
<!--
function CheckEmpty(){
    if(document.getElementById('name-2').value === ''){
        document.getElementById('name-error').innerHTML = 'لطفا نام خود را وارد کنید!';
        return false;
        }
    else{
        document.getElementById('name-error').innerHTML = '';
    }
    if(document.getElementById('family-2').value === ''){
        document.getElementById('family-error').innerHTML = 'لطفا نام خانوادگی خود را وارد کنید!';
        return false;
        }
    else{
        document.getElementById('family-error').innerHTML = '';
    }
    return true;
}
//-->
</script>
<hr />
<br />
استفاده از عبارات با قاعده و خاصیت test در جاوا اسکریپت. (یک ایمیل نامعتبر در فیلد زیر وارد کرده و سپس بر روی دکمه ارسال کلیک کنید.)
<br />
<br />
<script type="text/javascript">
<!--
function emailValidate(formid,email) {
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    var address = document.forms[formid].elements[email].value;
    if(reg.test(address) == false) {
        alert('آدرس ایمیل وارد شده نامعتبر است');
        return false;
   }
}
//-->
</script>
<form name="form-3" id="form-3" action="#" method="post" onsubmit="return emailValidate('form-3','email');">
<input type="text" name="email" id="email" />
<input type="submit" value="ارسال" />
</form>
<hr />
<br />
استفاده از دو متد کلیدی indexOf و charAt در جاوا اسکریپت. (برای بررسی مثال زیر، یک عبارت با استفاده از حروفی خارج از A,B,C,D,E,F در فیلد مورد نظر وارد کنید.)
<br />
<br />
<script type="text/javascript">
//<![CDATA[
function checkChar(string){
    validChar='ABCDEF';
    strlen=string.length;
    if(strlen<1){
        alert('لطفا یک عبارت وارد کنید');
        return false;
    }
    string=string.toUpperCase();
    for(i=0;i<strlen;i++){
        if(validChar.indexOf(string.charAt(i))<0){
            alert("تنها کارکترهای A,B,C,D,E,F مجاز هستند");
            return false;
    }
  }
  alert('فرم شما ارسال شد');
  return true;
}
//]]>
</script>
<form id="form-4" action="#" method="post" onsubmit="return checkChar(document.getElementById('chars').value);">
<input type="text" name="chars" id="chars" />
<input type="submit" value="ارسال" />
</form>
<hr />
<br />
استفاده از length و innerHTML در جاوا اسکریپت. (برای بررسی مثال زیر، عبارتی را در قسمت تعیین شده بنویسید.)
<br />
<br />
<script type="text/javascript">
//<![CDATA[
function countChars(usertext, counter, max) {
    var count = max - document.getElementById(usertext).value.length;
    if (count < 0) {
        document.getElementById(counter).innerHTML = "<span style=\"color: red;\">" + count + "</span>";
    }
    else {
        document.getElementById(counter).innerHTML = count;
    }
}
//]]>
</script>
<form id="form-5" action="#" method="post">
<textarea name="usertext" id="usertext" rows="6" cols="50" onfocus="countChars('usertext','char_count',10)" onkeydown="countChars('usertext','char_count',10)" onkeyup="countChars('usertext','char_count',10)">
</textarea>
</form>
تعداد حروف مجاز: <span id="char_count">10</span><br />
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» ساخت منوی آکاردئونی با جاوا اسکریپت و CSS
» استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP
» کنترل و تغییر اندازه فونت صفحه با جاوا اسکریپت
» نمایش کادر پیام شناور در سایت و وبلاگ با جاوا اسکریپت
» ساخت دکمه رفتن به بالای صفحه (Scroll to Top) با جاوا اسکریپت
commentنظرات (۱۱۰ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: salamatee
زمان: ۱۷:۰۵:۴۹ - تاریخ: ۱۳۹۲/۰۲/۱۶
سلام
خدا قوت
واقعا خوب بود ، بخصوص پاسخهایی که به سوالات داده شده بود ، من هم استفاده کردم و لذت بردم
خدا خیرت دهد
اگر امکان دارد همچنان ادامه دهید و دیگران را از علمتان بهره مند نمایید
خدا نگهدار
نویسنده: salamatee
زمان: ۱۷:۰۷:۲۳ - تاریخ: ۱۳۹۲/۰۲/۱۶
سلام
من این کد را برای ارسال فرم در onsubmit قرار دادم ولی بعد از وارد کردن کد پستی باز هم پیغام خطا نمایش داده می شود :
function checksubmit()
{
if(document.getElementById('koePosti').innerHTML =='')
{
document.getElementById('submit-err').innerHTML ='هنوز کد پستی را وارد ننموده اید !';
return false;
}
}
لطفا راهنمایی بفرمایید
پاسخ: 
سلام
در قسمت اول کد (شرط if) باید به جای innerHTML از value استفاده کنید، innerHTML برای افزودن یک مقدار است، اما value برای گرفتن مقادیر یک عنصر است.
نویسنده: asghar
زمان: ۱۰:۲۱:۴۸ - تاریخ: ۱۳۹۲/۰۴/۰۹
سلام برای اینکه مشخص کنیم کاربر فقط حروف انگلیسی وارد کنه باید در
validChar='ABCDEF';
از a تا z را بنویسیم یا راه دیگه ای هم وجود داره
پاسخ: 
سلام
راه حل ساده تر برای اعتبارسنجی رشته متنی، استفاده از عبارات با قاعده یا regex است:
<script type="text/javascript">
<!--
function CharValidate(id, name){
var reg = /^[a-zA-Z ]*$/;
var address = document.forms[id].elements[name].value;
if(reg.test(address) == false) {
alert('مقادیر وارد شده نامعتبر است');
return false;
}
alert('معتبر');
return true;
}
//-->
</script>
<form name="form" id="form" action="#" method="post">
<input type="text" name="input"><br>
<input type="button" value="اعتبار سنجی" onclick="CharValidate('form', 'input');">
</form>
نویسنده: زهرا
زمان: ۱۵:۱۰:۰۹ - تاریخ: ۱۳۹۲/۰۴/۱۱
با سلام
می خوام وقتی اطلاعات را در تکست باکس وارد کردم و ارسال کردم پبغامی نمایش داده شود و اطلاعاتی که در تکست باکس وارد شده را نمایش دهد ممنون می شم اگه راهنمایی کنید.
پاسخ: 
سلام
این کار نیازمند آشنایی با زبان سمت سرور (مانند PHP، ASP و...) است، اطلاعات فرم HTML را می توان در قالب متدهای post و get به سرور ارسال و در آنجا پردازش نمود.
نویسنده: رستمی
زمان: ۱۰:۰۴:۳۱ - تاریخ: ۱۳۹۲/۰۴/۱۴
با عرض سلام و خسته نباشید.
من کد زیر را برای پسورد و تکرار نوشتم اما اصلا کد عمل نمی کند. لطفا راهنمایی بفرمایید.
<script type="text/javascript">
<!--
function checkpass(){
var pass1=document.getElementById('pass1').value;
var pass2=document.getElementById('pass2').value;
var pass1length=pass1.length;
var pass2length=pass2.length;
if(pass1==null || pass1length<4 ){
document.getElementById('pass1').style.background="#fed8d7";
if(pass1==null || pass1==''){
document.getElementById('pass1info1').innerHTML='<span style="color:#ff0000">رمز عبور خود را وارد کنید.</span>';
return false;
}
else if ( pass1length<4){
document.getElementById('pass1info1').innerHTML='<span style="color:#ff0000">رمز عبور حداقل باید 5 کاراکتر باشد.</span>';
return false;
}
if(pass2length<4){
document.getElementById('pass2').style.background="#fed8d7";
if(pass2==null || pass2==''){
document.getElementById('pass2info1').innerHTML='<span style="color:#ff0000">تکرار رمز را وارد کنید.</span>';
return false;
}
else if (pass1!=pass2){
document.getElementById('pass2info1').innerHTML='<span style="color:#ff0000">تکرار رمز با رمز عبور یکسان نیست.</span>';
return false;
}
}
document.getElementById('pass2').style.background="#defed7";
document.getElementById('pass2info1').innerHTML='<span style="color:#13c201">رمز عبور و تکرار آن مورد تایید است.</span>';
return true;
}
}
-->
</script>
پاسخ: 
سلام
کد بالا اصلاح شد.
در چند مورد از عبارت or استفاده کرده بودید که صحیح نیست، یک علامت } نیز در انتها اضافه شد.
نویسنده: یحیی
زمان: ۱۳:۲۵:۵۹ - تاریخ: ۱۳۹۲/۰۴/۲۴
با عرض سلام و خسته نباشید.
در یک فرم دو دکمه رادیویی وجود داره که می خواهم وقتی کاربر یکی از دکمه ها رو انتخاب می کند یک پیام در یک دایو که ای دی اون مشخص است نمایش بده
<input id="typetest1"  class="input" name="typetest" type="radio" value="section"  />
<input id="typetest2" class="input" name="typetest" type="radio" value="final" />
لطفا راهنمایی کنید.
پاسخ: 
سلام
بدین منظور باید از جاوا اسکریپت استفاده کنید، نمونه کد:
<script type="text/javascript">
function ShowText(id, type){
if(type == 1){
document.getElementById(id).innerHTML = 'پیام شماره یک';
}
else if(type == 2){
document.getElementById(id).innerHTML = 'پیام شماره دو';
}
return false;
}
</script>
<body>
<input id="typetest1" class="input" name="typetest" type="radio" value="section" onclick="ShowText('your_id', 1);"/>
<input id="typetest2" class="input" name="typetest" type="radio" value="final" onclick="ShowText('your_id', 2);"/>
<div id="your_id"></div>
نویسنده: مهلا
زمان: ۲۰:۱۹:۲۲ - تاریخ: ۱۳۹۲/۰۵/۰۷
سلام خسته نباشی.
اطلاعاتم راجب جاوا اسکریپت کمه استادم یه سوالی گفته که نمیتونم جوابش رو پیدا کنم چون تازه دارم php یاد می گیرم.
می خوام وقتی کاربر می خواد ایمیلش رو وارد کنه ترتیب رعایت بشه. مثلا @ بعد از اسم دلخواه بعد یاهو یا....بعد دات....مرسی اگه زودتر جواب بدین
پاسخ: 
سلام
اگر دقت کنید، بخشی از مطلب به همین موضوع اختصاص دارد:
"اعتبار سنجی فیلد ایمیل با جاوا اسکریپت"
نویسنده: مهدی
زمان: ۱۴:۵۲:۳۰ - تاریخ: ۱۳۹۲/۰۵/۰۸
با سلام. من یه جدول از رکوردا دارم (صفحه ویرایش و حذف رکورد) که کنار هر رکورد یه چک باکس گذاشتم میخوام وقتی کاربر رکوردی رو انتخاب نکرد و دکمه حذف رو زد یه پیغام بدم که مثلا شما چیزی رو انتخاب نکردین. اینم بگم من id رکوردا رو میریزم تو چک باس. میشه راهنمایی کنید. ممنون
پاسخ: 
سلام
برای اعتبارسنجی خالی نبودن چک باکس، می توانید در رویداد onsubmit از تابع زیر استفاده کنید:
<script type="text/javascript">
function CheckBox(form_id){
var form = document.getElementById(form_id);
var count = 0;
var list = form.getElementsByTagName('input');
for(var i = 0; i < list.length; i++){
var items = list[i];
if(items.getAttribute('type') === "checkbox" && items.checked){
count++;
}
}

if(count > 0){
return true;
}

alert('لطفا حداقل یک چک باکس را انتخاب کنید');
return false;
}
</script>
نحوه استفاده در فرم:
<form action="#" id="myform" method="post" onsubmit="return CheckBox(this.id);">
<input type="checkbox" name="box_1" id="box_1"><br>
<input type="checkbox" name="box_2" id="box_2"><br>
<input type="checkbox" name="box_3" id="box_3"><br>
<input type="submit" value="ارسال">
</form>
نویسنده: ندا
زمان: ۱۴:۴۴:۳۶ - تاریخ: ۱۳۹۲/۰۵/۱۱
سلام سوال من خیلی طولانی است ولی اگر می شود یک توضیح مختصر در این باره بدهید
من می خواهم فرمی بنویسم که دارای قسمت های نام، نام خانوادگی، جنسیت و سن باشد و دارای دکمه ی ارسال باشد و وقتی دکمه ی ارسال را فشار می دهیم بررسی کند که اگر سن زیر 13 بود در همان صفحه بنویسد شما اجازه ی عضویت در این سایت را ندارید ولی اگر بالای 13 بود دو شرط زیر را بررسی کند که اگر جنسیت زن بود به صفحه ی زن ها برود و اگر مرد بود به صفحه ی مرد ها لطفا اگر می شود در مورد روش استفاده از If یا هر روش دیگری که بتواند شروط بالا را اجرا کند توضیح دهید.
با تشکر
پاسخ: 
سلام
هر چند نباید کدها را برایتان بنویسیم، اما در این مورد راه بهتری برای راهنمایی جزء نوشتن دستورات وجود ندارد:
<script type="text/javascript">
function CheckSubmit(form, id){
//دریافت مقادیر سن
var age = document.forms['myform'].elements['age'].value;
//متغیر gender
var gender;
//دریافت دو چک باکس مربوط به جنسیت
var input = document.forms['myform'].elements['gender'];
//استخراج مقادیر از چک باکسی که انتخاب شده
for(var i = 0; i < input.length; i++){
if(input[i].checked){
gender = input[i].value;
}
}
//متغیر action
var action;
//بررسی مقدار سن و نمایش پیام
if(age < 13){
document.getElementById(id).innerHTML = 'شما نمی توانید در این سایت ثبت نام کنید';
return false;
}
else{
//تنظیم آدرس قسمت action
if(gender == 'man'){
action = 'index.php?gender=man';
}
else{
action = 'index.php?gender=womman';
}
//تغییر action
document.forms['myform'].action = action;
//ارسال فرم
document.forms['myform'].submit;
return true;
}
return false;
}
</script>
<div id="error"></div>
<form action="#" name="myform" id="myform" method="post" onsubmit="return CheckSubmit('myform', 'error');">
<input name="name" type="text">
<br>
<input name="family" type="text">
<br>
<input name="age" type="text">
<br>
<input type="checkbox" name="gender" value="man">
<input type="checkbox" name="gender" value="woman">
<br>
<input type="submit" value="ارسال">
</form>
نویسنده: پرویز
زمان: ۰۲:۰۸:۴۲ - تاریخ: ۱۳۹۲/۰۶/۰۹
ببخشید دو علامت<!-- و //--> نشانه چیست؟
پاسخ: 
این دو علامت برای عدم نمایش کدهای جاوا اسکریپت به صورت متنی در وسایلی است که از آن پشتیبانی نمی کنند، مانند برخی تلفن های همراه، این دو علامت باعث می شوند که کد جاوا اسکریپت در اینگونه وسایل به عنوان یک پیام در HTML پردازش شود (و در نتیجه مخفی باشد).
نویسنده: پرویز
زمان: ۲۳:۳۶:۵۵ - تاریخ: ۱۳۹۲/۰۶/۰۹
ببحشید مفهوم این دستور در
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
در بخش اعتبار سنجی فیلد ایمیل با جاوا اسکریپت چیست؟
پاسخ: 
برای درک مفهوم دقیق دستورات، باید به مبحث عبارات باقاعده یا Regular Expressions مراجعه کنید، اما به طور ساده دستور بالا الگوی یک آدرس ایمیل معتبر است.
نویسنده: پرویز
زمان: ۱۸:۴۸:۱۵ - تاریخ: ۱۳۹۲/۰۶/۱۱
لطفا کد بالا را برای اعتبارسنجی خالی نبودن چک باکس است توضیح کامل دهید. ممنون می شوم.
پاسخ: 
توضیحات به صورت عبارات comment در موارد مورد نیاز درج شده، اگر متد یا قسمت خاصی قابل درک نیست، لطفا به صورت موردی مطرح کنید.
نویسنده: TARA
زمان: ۰۱:۲۴:۰۹ - تاریخ: ۱۳۹۲/۰۶/۱۲
سلام
اگه ما بخواهیم تو فرم جنسیت رو مشخص کنیم
و در صورتی که شخص جنسیت رو مرد انتخاب کرد یک گزینه نظام وظیفه فعال بشه براش چه دستوری باید بنویسم ؟؟
پاسخ: 
سلام
به روش های مختلف انجام این کار امکانپذیر است، منتها باید تا حدودی با جاوا اسکریپت آشنا باشید، به طور مثال می توانید یک فیلد بسازید و آن را با CSS مخفی کنید، اگر گزینه مرد انتخاب شد، وضعیت display آن را از none به block تغییر دهید، مثال:
<style type="text/css">
.hidden{
display:none;
}
</style>
<script type="text/javascript">
function showHidden(id){
document.getElementById(id).style.display = 'block';
}
</script>
<input type="radio" onclick="showHidden('hidden');">
<div class="hidden" id="hidden">
<input type="text">
</div>
نویسنده: ladybug70
زمان: ۱۳:۲۹:۴۲ - تاریخ: ۱۳۹۲/۰۶/۱۲
سلام
شما آموزشتون جدا جدا هستش...
یعنی من وقتی بخوام یک فرم بزارم که کاربر بیاد اطلاعاتش رو وارد کنه و بعد از اینکه دکمه ارسال رو زد ازش ایراداتش رو بگیره باید چی کار کنم...؟؟
پاسخ: 
سلام
قاعدتا هر کاربری ممکن است نوع خاصی از اعتبار سنجی یا ترکیبی از آنها را استفاده کند، لذا آموزش واحدی برای همه وجود ندارد!
باید ببینید فرم های شما به چه نوع اعتبارسنجی احتیاج دارند و متناسب با آن دستورات را تعریف کنید (باید با جاوا اسکریپت آشنا باشید).
نویسنده: ladybug70
زمان: ۱۴:۱۶:۴۵ - تاریخ: ۱۳۹۲/۰۶/۱۲
سلام
چرا برنامه های شما فقط برای یکی دو تا از فیلدها کار میکنه مثلا اعتبارسنجی فرم با رویداد onblur و innerHTML فقط برای نام و نام خانوادگی کار میکنه؟؟
چی کار کنم که بتونم برای یک فرم کامل از این کد استفاده کنم؟؟
پاسخ: 
سلام
اعتبارسنجی آموزش داده شده صرفا یک الگو و جهت نمونه است، به عبارتی نمی توان برای هر کاربری کد اختصاصی نوشت! باید با جاوا اسکریپت آشنا باشید و مطابق نمونه، موارد مد نظرتان را تعریف و اضافه کنید.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




7 × 1
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form زهرا
در:
سلام وقت بخیر من برای وبلاگم کد ماوس رو کپی میکنم طبق دستورهایی که هست ولی شکل ماوس من در وبلاگ تغییر نمیکند ممنون میشم...
۲۰:۰۰:۲۵ ۱۳۹۸/۰۶/۲۳

form نانا
در:
سلام! ممنون از سایت خوبتون.. راستش من توی اتوپلی کردن موزیک مشکل داشتم.. این بخش موزیکمه:
حذف شد
فکر کنم یه ذره قاطی شد.....
۱۶:۵۰:۱۰ ۱۳۹۸/۰۶/۲۱

form Fatemeh
در:
سلام لطفا یکی جواب منو بده میخام ۴۰ تا ایمیل بسازم و با ۴۰ ایمیل عضو یه سایت بشم ولی ارور میده و میگه شما...
۱۵:۵۷:۰۱ ۱۳۹۸/۰۶/۱۶

form احمدی
در:
سلام ببخشید مثال اول که نوشتید بر اساس مسیر فایلی که من دارم به چه شکل میشه؟
http://localhost/up/one_info/personal /one_info_personal_1425.png
در...
۱۴:۵۲:۳۴ ۱۳۹۸/۰۶/۱۰

form sareh
در:
سلام در مورد فرم ها سوال داشتم . اگر من دو فرم مستقل از هم داشته باشم چه طوری میتونم این فرم ها...
۱۴:۰۷:۴۰ ۱۳۹۸/۰۶/۱۰

form مهسا
در:
سلام وقت بخیر من یک فرم طراحی کردم input ها به صورت دو ستونه گذاشتم. میخواستم با زدن تب از input اولی در...
۱۳:۰۱:۴۶ ۱۳۹۸/۰۶/۰۲

form behzad
در:
مرسی خوب بود
۱۲:۱۵:۱۴ ۱۳۹۸/۰۶/۰۲

form zeynab
در:
سلام یه سوال دارم برای اینکه بتونم رنگ رو ذخیره کنم تو جدولم در قسمت پایگاه داده چیکار باید کنم ؟؟ من...
۱۷:۰۶:۳۵ ۱۳۹۸/۰۵/۲۸

form علی
در:
سلام من میخوام تو صفحه html همچین طرحی رو بندازم میشه راهنماییم کنید (به صورت جداگانه یعنی هر کدوم توی یه صفحه) ***** ...
۱۶:۴۶:۳۶ ۱۳۹۸/۰۵/۲۷

form Zeynab
در:
سلام . وقت بخیر . من از کدهای htaccess برای سایت استفاده کردم . روی لوکال هاست مشکلی ندارم اجرا میشن . ...
۲۲:۴۲:۵۴ ۱۳۹۸/۰۵/۲۳

form bahman
در:
عالی
۲۲:۱۵:۵۰ ۱۳۹۸/۰۵/۲۳

form Abbas rahmati
در:
سلام همه چی توی قسمت اینکه اس اس ال چطور کار میکنه درست بود فقط اخرشو درست نگفتید
۱۴:۱۶:۴۰ ۱۳۹۸/۰۵/۲۳

form مهدی فراهانی
در:
در آکولاد if، می خواهم پس از صحت پرداخت کاربر، کاربر به یک صفحه html برای دانلود فایل لینک شود. چه دستوری در حلقه if...
۱۲:۰۸:۳۲ ۱۳۹۸/۰۵/۲۳

form احسایدر
در:
شما از چه روشی برای لینک دادن به قسمت‌های نوشته استفاده کردید که با کلیک کردن چیزی به آدرس نوشته اضافه نمیشه؟
۱۸:۵۷:۰۵ ۱۳۹۸/۰۵/۲۲

form Mahyar
در:
سلام خسته نباشید اگه بخواهیم که یک pop up با کلیک به خارج از کادر pop up یا کلیک به روی دکمه esc...
۱۱:۴۸:۵۶ ۱۳۹۸/۰۵/۱۹