سه شنبه ۰۱ تیر ۱۴۰۰

Tuesday, June 22, 2021 GMT +4:30

» اعتبارسنجی فرم های وب با جاوا اسکریپت (JavaScript)

javascript-form-validation

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

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


قبل از پرداختن به ادامه آموزش ذکر این نکته ضروری است که منظور از اعتبارسنجی (Validation) در فرم های وب یعنی مقایسه و بررسی معتبر بودن اطلاعاتی که کاربر در آنها وارد کرده با مقادیر مورد انتظار برنامه نویس، به طور مثال هنگامی که کاربر بدون تکمیل فیلدهای مورد نیاز و ضروری قصد ارسال فرم را دارد یا به فرض اگر در فیلد ایمیل آدرس خود را بدون علامت @ درج کند می توانیم ضمن جلوگیری از ارسال فرم پیغام هشداری نیز نمایش دهیم تا این موضوع قبل از ارسال فرم به اطلاع او برسد.
به طور کلی اعتبارسنجی در وب می تواند در دو مرحله صورت گیرد:
در سمت کاربر (در مرورگر - Client Side با برنامه نویسی زبان هایی مانند JavaScript) و همچنین در سمت سرور (Server Side و با برنامه نویسی سمت سرور مانند زبان های PHP, ASP.NET و...) ترکیب این روش ها نیز با استفاده از فناوری ای جکس (Ajax) امکان پذیر است که پیش از این در این رابطه در بخش آموزش های  ای جکس (Ajax) صحبت کرده ایم.

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


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

بررسی خالی نبودن فیلدهای فرم در هنگام ارسال


معمولا اولین موردی که در کار با فرم های وب و بررسی اعتبار محتوای فیلدها مورد نیاز است اطمینان از خالی نبودن مقادیر ارسالی از تگ های input است، بدین منظور ابتدا لازم است که یک تابع در جاوا اسکریپت داشته باشیم که در هنگام ارسال فرم خالی نبودن مقادیر value فیلدها را بررسی کند که در نمونه کد زیر تابع فرضی با نام دلخواه checkFormValidation را نوشته ایم:
<script>
function checkFormValidation(form_name, input_name){
    var input = document.forms[form_name][input_name].value;
    
    if(input === null || input === ""){
        alert("فیلد نام نباید خالی باشد");
        return false;
    }
}
</script>
توضیح:
- با فراخوانی تابع در رویداد onsubmit (زمانی که بر روی دکمه ارسال کلیک می شود) ابتدا با متد document.forms و value مقادیر فیلد فرضی با نام (پارامتر name) input-1 را از فرمی با نام form-1 دریافت می کنیم.
- سپس با دستور شرطی if بررسی می کنیم متغیر input که شامل مقادیر (پارامتر value) فیلد input-1 است خالی یا null نباشد.
- اگر فیلد خالی باشد نتیجه بررسی ما true شده و با دستور alert پیام هشداری به کاربر نمایش داده می شود، با return false نیز حالت پیش فرض مرورگر نادیده گرفته شده و از ارسال فرم جلوگیری می شود.
نکته: برای فیلد input-1 در حالت عادی پارامتر value در نظر نگرفته ایم (مقدار آن null است) اما با شروع تایپ در این فیلد پارامتر value به صورت خودکار در HTML DOM (مخفف Document Object Model)  مقداردهی شده و در دسترس قرار می گیرد، برای اطلاعات بیشتر می توانیم دکمه F12 را در مرورگرهای مختلف فشرده و از قسمت Inspector سورس کد زنده صفحه را بررسی کنیم، هرچند این پارامتر با این شیوه قابل روئیت نیست اما در سورس ریشه صفحه وجود دارد.
تابع بالا را می توانیم در هنگام ارسال فرم های صفحات HTML به شکل نمونه زیر فراخوانی کنیم:
<form name="form-1" action="#" method="post" onsubmit="return checkFormValidation('form-1', 'input-1');">
<label for="input-1">نام:</label>
<input name="input-1" id="input-1" type="text" dir="rtl" placeholder="نام خود را وارد کنید">
<input type="submit" value="ارسال">
</form>
پیش نمایش مثال ها را می توانیم در انتهای این صفحه به صورت آنلاین بررسی کنیم.
توضیح:
- همانطور که گفتیم عبارت form-1 در واقع نام فرم و input-1 عنوان فیلد متنی مورد نظر است که از پارامتر name آنها بدست می آید.
- برای ارسال پارامترهای مورد نیاز تابع آنها را به صورت آرگیومنت تنظیم و در هنگام فراخوانی ارسال می کنیم که این کار در نمونه کد بالا با دو آرگیومنت form_name, input_name انجام شده است.
- رویدادی که برای فراخوانی تابع جاوا اسکریپتی استفاده کرده ایم onsubmit است که آن را به تگ form نسبت داده ایم.
- این نوع اعتبارسنجی تنها در صورتی عمل می کند که در فرم HTML از دکمه با نوع submit برای ارسال فرم استفاده شود که در غالب موارد همین طور است.

بررسی خالی نبودن فیلدها در زمان تکمیل فرم


یک شیوه دیگر اعتبارسنجی فرم های وب که می توانیم همزمان با پر کردن فیلدها و تکمیل فرم توسط کاربر از آن استفاده کنیم فراخوانی تابع جاوا اسکریپتی با رویدادهایی مانند onblur است، رویداد onblur زمانی اتفاق می افتد که کاربر ابتدا در فیلد کلیک یا به اصطلاح focus کرده سپس در فیلدی دیگر یا در فضای خالی صفحه کلیک می کند و در این حالت رویداد onblur رخ می دهد، از متد innerHTML نیز برای مقداردهی یک پیام در بلاک div با id مشخص یا دریافت مقادیر از آن استفاده می کنیم، برای نمونه
تابع جاوا اسکریپتی checkEmpty را به همراه فرم HTML شامل دو فیلد فرضی نام و نام خانوادگی کدنویسی کرده ایم:
<script>
function checkEmpty(input_id, div_id){
    if(input_id === 'input-2' && document.getElementById('input-2').value === ''){
        document.getElementById(div_id).innerHTML = 'لطفا نام خود را وارد کنید!';
        return false;
    } else {
        document.getElementById(div_id).innerHTML = '';
    }
    
    if(input_id === 'input-3' && document.getElementById('input-3').value === ''){
        document.getElementById(div_id).innerHTML = 'لطفا نام خانوادگی خود را وارد کنید!';
        return false;
    } else {
        document.getElementById(div_id).innerHTML = '';
    }
    
    return true;
}
</script>
<form name="form-2" action="#" method="post">
<label for="input-2">نام:</label>
<input name="input-2" id="input-2" type="text" dir="rtl" placeholder="نام خود را وارد کنید" onblur="checkEmpty(this.id, 'name-error');">
<div id="name-error" class="error"></div>
<br>
<label for="input-3">نام خانوادگی:</label>
<input name="input-3" id="input-3" type="text" dir="rtl" placeholder="نام خانوادگی خود را وارد کنید" onblur="checkEmpty(this.id, 'family-error');">
<div id="family-error" class="error"></div>
</form>
توضیح:
- در فرم فرضی بالا دو فیلد با نام های (پارامتر name) input-2 و input-3 داریم که برای هر کدام از آنها با اجرای رویداد onblur تابع checkEmpty را فراخوانی می کنیم.
- تابع checkEmpty با دو آرگیومنت input_id, div_id تعریف شده است که به ترتیب آی دی فیلد متنی input و آی دی بلاک div نمایش دهنده پیام خطا را شامل می شود.
- عبارت this.id آی دی تگ input (فیلد متنی) را به عنوان آرگیومنت تابع دریافت و تنظیم می کند، this در برنامه نویسی شی گراء به عنوان کلیدواژه آبجکت کاربرد داشته و در اینجا اشاره به آبجکت فیلد متنی دارد.
- دو بلاک div با id فرضی name-error و family-error را برای نمایش پیام خطا در کدها تنظیم کرده ایم که به هنگام فراخوانی تابع checkEmpty اگر مقادیر فیلدها خالی باشد، پیام مورد نظرمان را در بلاک ها نمایش می دهند، برای سفارشی سازی نحوه نمایش خطاها می توانیم در استایل CSS برای کلاس error خاصیت های دلخواه تعریف کنیم، به طور مثال:
<style>
.error {
    width: 300px;
    color: #FF0600;
}
</style>
- قسمت های return در تابع checkEmpty ضروری نیست و صرفا جهت اطلاع و استفاده های بعدی درج شده است.

اعتبارسنجی فیلد آدرس ایمیل با عبارات باقاعده


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

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


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

اعتبارسنجی وجود حروف فارسی با عبارات باقاعده


معمولا در زبان های برنامه نویسی برای رسیدن به یک هدف و تبدیل ایده ذهنی به برنامه قابل اجرا متدها و روش های مختلفی در دسترس است، اینکه از بین این روش ها کدام حالت را انتخاب کنیم عموما بستگی به میزان سازگاری متدها با پلتفرم ها و نسخه های مختلف، هر چه کوتاهتر بودن راه حل ها، پیچیدگی الگوریتم مد نظر و حتی گاهی سلیقه برنامه نویس دارد، در خصوص اعتبارسنجی وجود حروف و اعداد خاص در رشته ارسالی نیز این مبحث صدق می کند و همان طور که ملاحظه شد با متد indexOf می توانیم این کار را به سادگی انجام دهیم، در حالت پیشرفته تر مشابه آنچه در خصوص آدرس های ایمیل دیدیم این نوع اعتبارسنجی با دستورات عبارات با قاعده (Regular Expressions) نیز ممکن است که در ادامه با ذکر یک مثال این روش را بررسی می کنیم:
<script>
function checkChar(form_name, input_name){
    var pattern = /^([آ-ی])+$/u;
    var string = document.forms[form_name].elements[input_name].value;
    
    if(pattern.test(string) === false) {
        alert('مقادیر وارد شده نامعتبر است');
        return false;
    }
    
    return true;
}
</script>
<form name="form-5" action="#" method="post" onsubmit="return checkChar('form-5', 'input-6');">
<label for="input-6">عبارت فارسی:</label>
<input name="input-6" id="input-6" type="text" dir="rtl" placeholder="یک عبارت فارسی وارد کنید">
<input type="submit" value="ارسال">
</form>
در نمونه کد بالا صرفا اجازه درج حروف فارسی در فیلد input-6 به کاربر داده شده است، مبنای این کد دستورات عبارات باقاعده و Modifier u است، از u برای سازگاری کاراکترهای UTF-8 Unicode در دستورات Regex استفاده می شود.
برای حروف انگلیسی کافی است قسمت pattern را به شکل زیر تغییر دهیم:
var pattern = /^([A-Za-z])+$/u;
درج u در این حالت اختیاری است.

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


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

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


کد و پیش نمایش آنلاین مثال هایی که در این آموزش بررسی کردیم را می توانیم در ادامه جهت تجمیع مبحث و یادآوری مرور کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | اعتبارسنجی فرم های HTML با JavaScript</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
    font-size: 12px;
}
.error {
    display: block;
    padding: 4px;
    color: #C00;
}
</style>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!<br>
</noscript>

بررسی خالی نبودن فیلدهای فرم در هنگام ارسال (بدون پر کردن فیلد زیر بر روی دکمه ارسال کلیک کنید).
<br>
<br>
<script>
function checkFormValidation(form_name, input_name){
    var input = document.forms[form_name][input_name].value;
    
    if(input === null || input === ""){
        alert("فیلد نام نباید خالی باشد");
        return false;
    }
}
</script>
<form name="form-1" action="#" method="post" onsubmit="return checkFormValidation('form-1', 'input-1');">
<label for="input-1">نام:</label>
<input name="input-1" id="input-1" type="text" dir="rtl" placeholder="نام خود را وارد کنید">
<input type="submit" value="ارسال">
</form>
<hr>
<br>
بررسی خالی نبودن فیلدها در زمان تکمیل فرم (ابتدا در یک فیلد کلیک کرده و بدون پر کردن آن در فیلد بعدی کلیک کنید).
<br>
<br>
<script>
function checkEmpty(input_id, div_id){
    if(input_id === 'input-2' && document.getElementById('input-2').value === ''){
        document.getElementById(div_id).innerHTML = 'لطفا نام خود را وارد کنید!';
        return false;
    } else {
        document.getElementById(div_id).innerHTML = '';
    }
    
    if(input_id === 'input-3' && document.getElementById('input-3').value === ''){
        document.getElementById(div_id).innerHTML = 'لطفا نام خانوادگی خود را وارد کنید!';
        return false;
    } else {
        document.getElementById(div_id).innerHTML = '';
    }
    
    return true;
}
</script>
<form name="form-2" action="#" method="post">
<label for="input-2">نام:</label>
<input name="input-2" id="input-2" type="text" dir="rtl" placeholder="نام خود را وارد کنید" onblur="checkEmpty(this.id, 'name-error');">
<div id="name-error" class="error"></div>
<br>
<label for="input-3">نام خانوادگی:</label>
<input name="input-3" id="input-3" type="text" dir="rtl" placeholder="نام خانوادگی خود را وارد کنید" onblur="checkEmpty(this.id, 'family-error');">
<div id="family-error" class="error"></div>
</form>
<hr>
<br>
اعتبارسنجی فیلد آدرس ایمیل با عبارات باقاعده (یک ایمیل نامعتبر در فیلد زیر وارد کرده و سپس بر روی دکمه ارسال کلیک کنید).
<br>
<br>
<script>
function emailValidator(form_name, input_name) {
    var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    var address = document.forms[form_name].elements[input_name].value;
    
    if(pattern.test(address) === false) {
        alert('آدرس ایمیل وارد شده نامعتبر است');
        return false;
    }
    
    return true;
}
</script>
<form name="form-3" action="#" method="post" onsubmit="return emailValidator('form-3', 'input-4');">
<label for="input-4">آدرس ایمیل:</label>
<input name="input-4" id="input-4" type="text" dir="ltr" placeholder="ایمیل خود را وارد کنید">
<input type="submit" value="ارسال">
</form>
<hr>
<br>
اعتبارسنجی وجود حروف و اعداد خاص با متد indexOf (برای بررسی مثال زیر یک عبارت با استفاده از کاراکترهایی به جز حروف A, B, C, D, E, F در فیلد مورد نظر وارد کنید).
<br>
<br>
<script>
function checkChar(form_name, input_name){
    var chars = 'ABCDEF';
    var string = document.forms[form_name].elements[input_name].value;
    var strlen = string.length;
    
    if(strlen < 1){
        alert('لطفا یک عبارت وارد کنید');
        return false;
    }
    
    string = string.toUpperCase();
    for(i = 0; i < strlen; i++){
        if(chars.indexOf(string.charAt(i)) < 0){
            alert("تنها کارکترهای A, B, C, D, E, F مجاز هستند");
            return false;
        }
    }
    
    alert('فرم شما ارسال شد');
    return true;
}
</script>
<form name="form-4" action="#" method="post" onsubmit="return checkChar('form-4', 'input-5');">
<label for="input-5">کاراکترها:</label>
<input name="input-5" id="input-5" type="text" dir="ltr" placeholder="چند کاراکتر وارد کنید">
<input type="submit" value="ارسال">
</form>
<hr>
<br>
اعتبارسنجی وجود حروف فارسی با عبارات باقاعده (برای بررسی مثال زیر یک عبارت با استفاده از کاراکترهایی به جز حروف زبان فارسی در فیلد مورد نظر وارد کنید).
<br>
<br>
<script>
function checkChar(form_name, input_name){
    var pattern = /^([آ-ی])+$/u;
    var string = document.forms[form_name].elements[input_name].value;
    
    if(pattern.test(string) === false) {
        alert('مقادیر وارد شده نامعتبر است');
        return false;
    }
    
    return true;
}
</script>
<form name="form-5" action="#" method="post" onsubmit="return checkChar('form-5', 'input-6');">
<label for="input-6">عبارت فارسی:</label>
<input name="input-6" id="input-6" type="text" dir="rtl" placeholder="یک عبارت فارسی وارد کنید">
<input type="submit" value="ارسال">
</form>
<hr>
<br>
اعتبارسنجی تعداد حروف مجاز در هنگام پر کردن فیلد (برای بررسی مثال زیر عبارتی دلخواه را در محدوده textarea بنویسید).
<br>
<br>
<script>
function countChars(textarea_id, div_id) {
    var max = 10;
    var count = max - document.getElementById(textarea_id).value.length;
    var text = 'تعداد کاراکتر باقیمانده: ';
    
    if(count < 0) {
        document.getElementById(div_id).innerHTML = text + '<span style="color: red;">' + count + '</span>';
    } else {
        document.getElementById(div_id).innerHTML = text + count;
    }
}
</script>
<form id="form-6" action="#" method="post">
<textarea name="usertext" id="usertext" rows="6" cols="50" onfocus="countChars('usertext', 'result')" onkeydown="countChars('usertext', 'result')" onkeyup="countChars('usertext', 'result')">
</textarea>
<div id="result"></div>
</form>
</body>
</html>
پیش نمایش آنلاین
دسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» نمایش کادر پیام شناور در سایت و وبلاگ با جاوا اسکریپت
» ساخت افکت رنگی با جاوا اسکریپت (JavaScript)
» استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP
» نمایش پیام صفحه در حال بارگذاری با جاوا اسکریپت
» ساخت منوی آکاردئونی با جاوا اسکریپت و CSS
commentنظرات (۱۱۶ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: رز
۱۱:۳۸ ۱۳۹۵/۰۴/۲۸
چه اشکالی داره کد اماده اینو بزارین
ما استفاده کنیم
وقت هم کمه
مرســـــــــی
پاسخ: 
محدودیت زمانی... روزانه به تعداد زیادی از سوالت کاربران پاسخ داده می شود، اگر برای هر کاربر کد اختصاصی نوشته شود دیگر مجالی برای پاسخگویی باقی نخواهد ماند! لطفا وقت بگذارید و آموزش ها را فرا بگیرید، برنامه نویسی مهارتی نیست که بدون آموزش و یادگیری انتظار فرا گرفتن آن را داشته باشید!
نویسنده: رز
۱۶:۲۸ ۱۳۹۵/۰۴/۲۹
سلام یه فرم ورود کاربر طراحی کردم
که وصل میشه دیتابیس و وارد پنل کاربری میشه
ولی مشکل اینجاس که فقط با نام کاربری و پسورد یه نفر میشه وارد شد و نمیشه با یه نام کاربری و پسورد دیگه وارد شد
بنظرتون مشکل از کجاست
مرسی از سایت خوبتون
پاسخ: 
بدون تست و دیدن سورس کدها نمی توان جواب خاصی ارائه کرد! در کل فرم شما باید به صورت داینامیک برنامه نویسی (با استفاده از تنظیم سشن آی دی برای هر کاربر و...) و از اطلاعات ثبت شده در دیتابیس استفاده کند، مسلما در این صورت تفاوتی ندارد چه کاربری وارد سیستم می شود، اگر اطلاعات او در دیتابیس موجود باشد می توان نام کاربری و کلمه عبور را تطبیق داد و در صورت صحیح بودن، سشن آی دی و کوکی را تنظیم کرد، لذا برای طراحی صحیح یک فرم ورود نیاز است که به بحث سشن در PHP و همچنین کار با دیتابیس MySQL مسلط باشید!
نویسنده: نواز
۲۳:۰۸ ۱۳۹۶/۰۵/۰۷
فرضا يك فرم اعتبار سنجي داريم مثل فرم ثبت نام حالا ميخوام دستوري داشته باشيم كه درون يكي از ورودي ها خطايي وجود داشت صفحه به آن قسمت اسكرول شود
پاسخ: 
ابتدا باید برای هر قسمت یک ID منحصر بفرد داشته باشید، به طور مثال:
<div id="item-1"></div>
<div id="item-2"></div>
<div id="item-3"></div>
در این حالت هم می توانید به صورت ساده ID را در انتهای URL قرار دهید، مثال:
yoursite.com/users#item-2
هم اینکه از افکت jQuery یا جاوا اسکریپت استفاده کنید، مثال:
http://jsfiddle.net/dizel3d/1eamwt4e
http://jsfiddle.net/kevinPHPkevin/8tLdq/1
نویسنده: seli
۲۲:۳۲ ۱۳۹۶/۰۷/۱۸
سلام تشکر میکنم از سایت خوبتون. من درحال نوشتن یه سایت هستم که ناحیه ادمین داره و ادمین اونجا میتونه پست ها رو ویرایش کنه و... قصد دارم که وقتی میخواد یه پست رو حذف کنه اول یسری اطلاعات بگیره و بعد بره توی دیتابیس سرچ کنه و مشخصات اون پست رو توی یه فرمی نمایش بده که کاربر بفهمه همون پست هستش یا نه و بعد روی یه input از نوع submit کلیک کنه و یه modal باز بشه که آیا از حذف مطمئنه یا نه. همشو نوشتم و مشکلی نداره تنها مشکلم اینه که وقتی روی submit کلیک میکنم، مدال یه لحظه باز میشه و سریع بسته میشه. کد مدال هیچ مشکلی نداره و وقتی با button مدال میسازم هم هیچ مشکلی ندارم . اما وقتی با input میسازم این مشکل برام پیش میاد. تا حدودی متوجه شدم که برای اینکه نگهش دارم باید از jquery استفاده کنم ولی دقیق نمیدونم از چه اسکریپتی باید استفاده کنم. ممنون میشم راهنماییم کنید.
پاسخ: 
با توجه به توضیحات حدس ما این است که با زدن دکمه input فرم شما به آدرس در نظر گرفته شده در قسمت action ارسال می شود، به عبارتی عمل submit بدون تائید کاربر صورت می گیرد، برای جلوگیری از ارسال فرم راه حل هایی وجود دارد، از جمله اینکه دکمه اطمینان از حذف پست به صورت submit نباشد و یک button باشد که پنجره بله خیر را نمایش دهد، در صورت تائید کاربر یک تابع در جاوا اسکریپت یا جی کئوری اجرا کنید که فرم را ارسال کند:
<style type="text/css">
#center-div {
display: none;
width: 100px;
height: 100px;
background-color: #C0C0C0;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
overflow: auto;
}
</style>
<div id="center-div">
<input type="button" onclick="submitForm()" value="Yes">
<input type="button" onclick="resetForm('center-div')" value="No">
</div>
<form name="myform" action="index.php">
<input type="button" onclick="checkSubmit('center-div')" value="Delete">
</form>
<script type="text/javascript">
function checkSubmit(id) {
document.getElementById(id).style.display = 'block';
}
function submitForm() {
document.myform.submit();
}
function resetForm(id) {
document.getElementById(id).style.display = 'none';
}
</script>
نویسنده: مینا
۱۷:۲۳ ۱۳۹۶/۰۸/۰۶
سلام خسته نباشید اگر در فرم قسمت جنسیت داشته باشیم و بخواهیم یا زن یا مرد به طور پیش فرض انتخاب شده باشد چکار باید کرد؟ خیلی ضروری هست ممنون میشم جواب بدید
پاسخ: 
کافی است به صورت دستی یا داینامیک پارامتر checked را به عنصر مورد نظر اضافه کنید، مثال:
<input type="radio" name="gender" value="1" checked="checked">
نویسنده: adel
۲۱:۲۵ ۱۳۹۸/۰۸/۲۴
سلام با تشکر از سایت خوب شما. یه سوال داشتم چگونه تمام این کدها را در جاوا اسکریپت همزمان قرار دهیم. من مثلا دستور این که هیچ کدام از این فیلدها خالی نباشد را قرار میدهم و فایل را به تنهایی اجرا می کند و بعد از اینکه مثلا دستور چک کردن ایمیل را می نویسم ارور میده لطفا کمکم کنید تمام مواردی که فرموده اید در بالا را در یک فایل یا دستور چگونه بنویسم تا همه چیز را در بر گیرد. ممنون از زحمات شما
پاسخ: 
به روش های مختلف می توانید این کار را انجام دهید به فرض فراخوانی تمام توابع در یک تابع اما ساده ترین حالت درج و البته ویرایش تمام کدها در یک تابع است، به طور مثال:
<script>
function validateForm(){
var error = false;

//بررسي خالي نبودن فيلد نام
var field = document.forms["form-id"]["input-id"].value;
if (field === null || field == ""){
alert("فيلد نام نبايد خالي باشد");
error = true;
}

//بررسي معتبر بودن ايميل
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = document.forms["form-id"].elements["input-id"].value;
if(reg.test(address) === false) {
alert('آدرس ايميل وارد شده نامعتبر است');
error = true;
}

if(error === true){
return false;
} else{
return true;
}
}
</script>
قاعدتا ویرایش صحیح یا خطایابی کدهای جاوا اسکریپت مستلزم این است که قبلا با این زبان کار کرده باشید، در واقع باید معنی کدهایی که می نویسید را بدانید، مفسر جاوا اسکریپت به کوچکترین اشتباه واکنش نشان می دهد و ممکن است کل برنامه از کار بیفتد.
در صورت بروز خطا در هر مورد باید دید علت چیست و آن را رفع کرد، معمولا با زدن دکمه F12 صفحه کلید در صفحه وب و بررسی قسمت Debugger مرورگر می توان خطاها را مشاهده کرد.
نویسنده: یاسمن
۱۸:۵۲ ۱۳۹۹/۰۳/۰۲
سلام یه برنامه ای که رشته رو به عنوان password دریافت کنه و کاراکتر فاصله نباشد طول رشته هم از 8 تا 50 باشه عدد باشه برای پسورد و حروف الفبا قبول نکنه و با دستور پرچم flag اگه درست باشه 1 اگه نباشه 0 بزنه
میشه کمک کنید برنامه رو بهم بدین؟
پاسخ: 
با جاوا اسکریپت می توانید این اعتبارسنجی را در سمت کاربر انجام دهید منتها اعتبارسنجی سمت کاربر قابل اتکا نیست و باید در سرور (دستورات PHP) نیز اعتبارسنجی صورت گیرد، در هر صورت با توجه به توضیحات نمونه کد زیر شاید کمک کند:
<script>
function passValidate(id) {
var reg = /^([0-9]+)$/;
var pass = document.getElementById(id).value;
var flag = 0;

if(reg.test(pass) == false || pass.length < 8 || pass.length > 50) {
flag = 0;
alert(flag);
//return flag;
} else{
flag = 1;
alert(flag);
//return flag;
}
}
</script>
<label for="pass">Password:</label>
<input id="pass" type="text">
<button onclick="passValidate('pass');">Check</button>
نویسنده: zahra
۱۰:۴۰ ۱۳۹۹/۰۳/۱۵
سلام وقتتون بخیر.
چطور باید خالی بودن text را چک کرد؟ به این صورت که اگه خالی بود پیغام خطا مبنی بر این textbox را نباید خالی گذاشت نمایش دهد.
پاسخ: 
اولین مثال این آموزش دقیقا در همین خصوص است، در صورتی که نیاز به قابلیت دیگری دارید لطفا با جزئیات توضیح دهید تا امکان راهنمایی دقیقتر میسر باشد.
نویسنده: aliak
۱۶:۱۲ ۱۳۹۹/۰۳/۲۰
با سلام و ممنون از سایت خوبتان. ببخشید من چگونه یک کاربر جدید به فرم ورود خود اضافه کنم؟
پاسخ: 
برای افزودن کاربر باید سیستم عضویت در سایت طراحی و برنامه نویسی کنید، سیستم های عضویت معمولا باید از زبان های سمت سرور مانند PHP و دیتابیس MySQL استفاده کنند، آموزش ساخت فرم عضویت با PHP و MySQL در سایت وجود دارد که با جستجوی همین عبارت در گوگل می توانید به آن دسترسی پیدا کنید.
نویسنده: متین
۰۱:۵۰ ۱۳۹۹/۰۴/۰۴
سلام ؛ من تازه شروع به یادگیری کردم ؛ مطلب بسیار کاربردی بود ؛ ممنون از شما دوست عزیز.
نویسنده: sattar
۱۵:۱۰ ۱۴۰۰/۰۳/۰۸
سلام، اون قسمتی که اعتبار سنجی ورود حروف فارسی هست مشکل داره یعنی کاربر رو اجبار به وارد کردن حروف فارسی میکنیم اما اگر مثلا فامیلی بخاد وارد کنه و فامیلی دو بخشی باشه یعنی فاصله بینشون باشه قبول نمیکنه و خطا میده
لطفا راحل این مورد را بفرمایید
پاسخ: 
برای اینکه فاصله هم جزء ورودی مجاز باشد کافی است الگو را به شکل زیر تغییر دهیم:
var pattern = /^([ آ-ی])+$/u;
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





3 × 4
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form علیرضا
در:
مفید و کاربردی مرسی
۱۴۰۰/۰۳/۳۱

form محمود
در:
سلام مهندس وقت بخیر دوباره به کمک شما نیاز پیدا کردم ، چگونه می توان استایل صوت به یک متن داد. به...
۱۴۰۰/۰۳/۳۰

form پرتو
در:
سلام استاد خسته نباشید قالبم درست شد خیلی ممنون یه خواهش دیگه هم ازتون داشتم اینکه یه بوردر برای تک به تک پست ها جداگانه...
۱۴۰۰/۰۳/۲۴

form بهنیا
در:
سلام خسته نباشید ببخشید چطوری میتونم برای خود وبسایتم یه لینک بسازم؟ کد خاصی داره؟
۱۴۰۰/۰۳/۲۴

form Raha
در:
سلام وقت بخیر چه جوری می تونم از دو تا function باهم استفاده کنم. مثلا میخوام توی مسیج باکس دوتا عدد دلخواه بدم...
۱۴۰۰/۰۳/۲۴

form رها
در:
سلام ممنون میشم اگه راهنماییم کنید من میخوام تو جاوا اسکریپت توی مسیج باکس بصورت اختیاری عدد بدم و جمع و تفریق انجام بشه. ...
۱۴۰۰/۰۳/۲۴

form محمد
در:
با عرض سلام و احترام مجدد پیرو کامنت قبلی که لطف کرده و توجه فرمودید آدرس سایت این هست: از توجه و راهنمایی‌های همیشگی...
۱۴۰۰/۰۳/۲۳

form محمد
در:
سلام وقت بخیر با سپاس از تیم محترم وبگو یک سوال داشتم از خدمتتون در عکسی که در آدرس با...
۱۴۰۰/۰۳/۲۲

form پرتو
در:
با سلام استاد من براتون ایمیل فرستادم لطفا ایمیل خود را چک کنید با تشکر
۱۴۰۰/۰۳/۲۱

form پرتو
در:
سلام خوبید خسته نباشید من یه کد قالبی دارم که میشه براتون بفرستم و شما تغییرش بدین من قالبم رو می خاستم اگه...
۱۴۰۰/۰۳/۲۰

form سید ارمیا حسینی
در:
سلام ببخشید عالی بود اما اگه می خواستم مثلا چیزی رو ایجاد کنم که مثلا کاربر بعد از ورود به صحفه 5 ثانیه بعد وارد...
۱۴۰۰/۰۳/۲۰

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

form علیرضا حسینی
در:
دمتون گرم خسته نباشید خیلی عالی بود
۱۴۰۰/۰۳/۱۸

form حامدترابی
در:
سلام چند وقته که وبلاگ شهیدحسن ترابی گودرزی باز نمیشه ولی با vpn باز میشه. میشه راهنماییم کنید. ممنون میشم
۱۴۰۰/۰۳/۱۶

form mahdi
در:
سلام استاد این تابع در لوکال هم ایمیل ارسال میکنه هم فایل ضمیمه ، البته زمپ رو یه سری تغییرات باید داد و حساب ایمیل...
۱۴۰۰/۰۳/۱۲

form mahdi
در:
سلام وقت بخیر ، استاد عزیز اگر ما با تابع mail یه تابعی بنویسیم که در لوکال قابلیت ارسال هر نوع ایمیلی رو داشته باشه...
۱۴۰۰/۰۳/۱۲

form masood
در:
سلام وقتتون بخیر ببخشید من یک سوالی دارم اگر بخوایم تنظیماتی که برای id و class در نظر داریم رو تو یه...
۱۴۰۰/۰۳/۱۱

form mahdi
در:
استاد وقتشو دارید امشب ببینیدش مثلا در حد نیم ساعت که وقتتونم گرفته نشه؟
۱۴۰۰/۰۳/۱۰

form mahdi
در:
سلام استاد وقت بخیر،استاد عزیز من یه چارت با جاوااسکریپت نوشتم که سه تا نمودار میلیه ای و خطی و نقطه ای رو در بر...
۱۴۰۰/۰۳/۱۰

form پرتو
در:
وای من نمی تونم توی زمینه طراحی قالب های دیگ فعالیت کنم چون خیلی سختن فک نکنم بتونم اگر جایی می شناسید که قالب های...
۱۴۰۰/۰۳/۰۹

form پرتو
در:
سلام خسته نباشید شرمنده مزاحم شدم دوباره، می خاستم بپرسم می ارزه کسی وبلاگ در مورد قالب سازی بزنه یا اینکه نه نمی ارزه آخه...
۱۴۰۰/۰۳/۰۹

form یاس
در:
سلام میخواستم بدونم چجوری باید فایل متنی HTML دارای هایپرلینک را باز کند و محتوای آنرا بخواند و سپس هایپرلینک های آن را شناسایی کند...
۱۴۰۰/۰۳/۰۸

form sattar
در:
سلام، اون قسمتی که اعتبار سنجی ورود حروف فارسی هست مشکل داره یعنی کاربر رو اجبار به وارد کردن حروف فارسی میکنیم اما اگر مثلا...
۱۴۰۰/۰۳/۰۸

form mahdi
در:
سلام استاد ckeditor بهتره یا TinyMCE؟ من اینو ckeditor دیدم که راست چین چپ چین نداشت بعد استاد عزیز من یه چیزی رو...
۱۴۰۰/۰۳/۰۶

form پرتو
در:
ممنونم از شما که کدش رو دادید فقط یه سوال داشتم و اونم اینکه این کد رو در کدوم قسمت قالب قرار بدم و ایا...
۱۴۰۰/۰۳/۰۴

form mahdi
در:
سلام نه استاد عزیز نیازی نیست چون خودمم فکر میکنم لوگو رو باید از قبل مثلا با فتوشاپ آماده داشت و فقط میخواستم این امکانم...
۱۴۰۰/۰۳/۰۳

form پرتو
در:
سلام خواستم تشکر کنم از کدی که قبلا بهم داده بودید درست شد قالبم واقعا ممنونم ازتون یه چیز دیگه می خاستم بگم اینکه یه...
۱۴۰۰/۰۳/۰۳

form دانیال
در:
باسلام خیلی ممنون بابت مطالب عالیه سایتتون این مطلب هم مثل بقیه مطالب عالی بود
۱۴۰۰/۰۳/۰۳

form mahdi
در:
سلام استاد عزیز ، بله استاد اونطوری قرار میگیره وقتی تصویر از قبل مثلا با فتوشاپ شفاف شده باشه ، ولی اگر بخوایم یک عکس...
۱۴۰۰/۰۳/۰۳
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.