ایجاد اعتبارسنجی اعداد و حروف برای رمز عبور در Java Script

افزودن فرم ثبت نام که یکی از قسمت های رایج در برنامه نویسی صفحات وب میباشد ، حال باید تمام قسمتهای فرم ثبت نام را اعتبارسنجی نماییم ، در قسمت رمز عبور باید کاربر را محدود به وارد کردن حروف و اعداد کنیم (از وارد کردن سمبلها و علامتها جلوگیری کنیم)

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

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

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

در این مقاله نحوه اعتبارسنجی مقدار وارد شده توسط کاربر در کنترل TextBox را شرح خواهیم داد .ابتدا یک website در ویژوال استودیو ایجاد میکنیم .سپس تابع اسکریپت اعتبارسنجی را در تگ <Script> می نویسیم :

<script type="text/javascript">
        var specialKeys = new Array();
        specialKeys.push(8); //Backspace
        specialKeys.push(9); //Tab
        specialKeys.push(46); //Delete
        specialKeys.push(36); //Home
        specialKeys.push(35); //End
        specialKeys.push(37); //Left
        specialKeys.push(39); //Right
        function IsAlphaNumeric(e) {
            var keyCode = e.keyCode == 0 ? e.charCode : e.keyCode;
            var ret = ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122) || (specialKeys.indexOf(e.keyCode) != -1 && e.charCode != e.keyCode));
            document.getElementById("error").style.display = ret ? "none" : "inline";
            return ret;
        }
    </script>

یک کنترل textBox به صفحه اضافه میکنیم :

 <input type="text" id="text1" onkeypress="return IsAlphaNumeric(event);" ondrop="return false;"
        onpaste="return false;" />

سپس یک کنترل span نیز به صفحه اضافه میکنیم ، خاصیت display آنرا none قرار میدهیم که در ابتدا نمایش داده نشود ، اگر مقدار وارد شده اشتباه بود متن داخل span نمایش داده میشود .در غیر اینصورت متن آن پنهان میماند .

 <span id="error" style="color: Red; display: none">* علامت و نشانه مجاز نیست</span>

در کنترل TextBox از سه رویداد OnKeyPress , Ondrop , Onpaste استفاده کرده ایم .

در رویداد onkeypress تابع IsAlphaNumeric ابتدا فراخوانی میشود ، که در این تابع کد ASCII را بررسی میکند سپس اگر مقدار وارد شده مجاز بود ، تگ span نمایش داده نمیشود .در غیر این صورت محتوای تگ Span نمایش داده میشود .

در ادامه کلیه تگ و اسکریپت موجود در صفحه را می توانید به صورت یکجا مشاهده نمایید :

<!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>
    <title></title>
    <style type="text/css">
        body
        {
            font-size: 9pt;
            font-family: Arial;
        }
    </style>
</head>
<body dir="rtl">
    <h3>
        <a href="http://barnamenevisan.org/">برنامه نویسان</a>
    </h3>
     اعتبار سنجی مقادیر:
    <input type="text" id="text1" onkeypress="return IsAlphaNumeric(event);" ondrop="return false;"
        onpaste="return false;" />
    <span id="error" style="color: Red; display: none">* علامت و نشانه مجاز نیست</span>
    <script type="text/javascript">
        var specialKeys = new Array();
        specialKeys.push(8); //Backspace
        specialKeys.push(9); //Tab
        specialKeys.push(46); //Delete
        specialKeys.push(36); //Home
        specialKeys.push(35); //End
        specialKeys.push(37); //Left
        specialKeys.push(39); //Right
        function IsAlphaNumeric(e) {
            var keyCode = e.keyCode == 0 ? e.charCode : e.keyCode;
            var ret = ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122) || (specialKeys.indexOf(e.keyCode) != -1 && e.charCode != e.keyCode));
            document.getElementById("error").style.display = ret ? "none" : "inline";
            return ret;
        }
    </script>
	

</body>
</html>

فایل های ضمیمه

JavaScript.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

ایجاد اعتبارسنجی اعداد و حروف برای رمز عبور در Java Script

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

فایل های ضمیمه

احسان حسینی

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