جاوا اسکریپ (اعتبار سنجی کارت بانکی + لوگو بانک)

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

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

https://github.com/sunnywebco/bankcardcheckiran

بعد از دانلود فایل zip را از حالت فشرده خارج کنید و فایل bank-iran را نیز از حالت فشرده خارج کنید و حتما دقت کنید به این صورت فایل ها باشد .

تصویری داخل فایل bank-iran نیز به این صورت است .

خود حالا می توانید فایل index.html را اجرا نمایید .

اگر شماره کارت درست وارد کنید لوگو بانک در کنار input نمایش داده میشود . ولی در صورت اشتباه وارد کردن با خطا شماره کارت اشتباه است روبه رو می شوید .

حالا یک بررسی روی کد داشته باشیم که بهتر درک کنید فرآیند و عمل کردن احراز هویت دقت کنید که می توانید خود شما از UI بهتری استفاده کنید چون ما صرفا به آموزش فکرده ایم !!

توضیحات

ما از جاوا اسکریپت (کوئری) 3.2.1 استفاده کرده ایم که شما می توانید به روز ترین آن هم استفاده کنید .

<script src=&quot./jquery-3.2.1.min.js&quot type=&quottext/javascript&quot>

کد های UI که ما زیاد برای آن ها وقت نذاشته ایم .

<img width=&quot32px&quot id=&quotimg0&quot src=&quot&quot>
<input type=&quottext&quot id=&quotcardnumber&quot =&quotsunnyweb_check_number();&quot>
<p id=&quotcard_er&quot style=&quotdisplay: none; color: red;margin: 2% 0 0 0;background: #ffff0029;padding-right: 5%;&quot>شماره کارت اشتباه می باشد</p>

نکته id="img0" برای نمایش تصویر مهم و اجباری است و باید در تگ img قرار بگیرد . حالا می توانید بعدها خود شما این اسم تغییر دهید ولی باید در کد جاوا اسکریپ نیز تعویض کنید .

تگ id="cardnumber" برای گرفتم شماره کارت از کاربر می باشد که در input قرار داده ایم .

تگ ="sunnyweb_check_number();" برای اجرا به وقت تغییر در ورودی دریافتی کاربر در input که همان شماره کارت است .

تک id="card_er" نیز برای نمایش خطا سیستم است که دقت کنید ما از style="display: none; برای مخفی کردن به صورت عادی استفاده کرده ایم و فقط زمانی که خطا بروز دهد به حالت show در خواهد آمد .

http://api.sunnyweb.ir/

ما داخل کد جاوا اسکریپ یک عملگر ایجاد کرده ایم .

function sunnyweb_check_number()

خوب در قدم بعدی نیز مقدار تگ id="cardnumber" با خط زیر دریافت و به یک var به نام cardnumber نسبت داده ایم که راحت در کد استفاده کنیم .

var cardnumber = document.getElementById(&quotcardnumber&quot).value;

همینطور برای احتیاط از کد زیر هم برای مخفی کردن پیام خطا در زمان وارد کردن اطلاعات توسط کاربر استفاده کرده ایم . اگر این کد نباشد تا خطا بر طرف نشود به کاربر نمایش می دهد که شماره کارت اشتباه است بهتر است در زمان تایپ به کاربر پیام داده نشود .

document.getElementById('card_er').style.display='none';

حالا وقت الگوریتم بررسی کد اصالت کارت بانکی میرسد که به شرح زیر است . چون کد زیاد به صورت عکس قرار داده ایم .

در این کد مقدار عددی دریافت میشود و سپس مقدار طول باید کمتر از 16 باشد . در این کد ما از دو دستور در جاوا اسکریپ استفاده کرده ایم که منابع برای مطالعه شما قرار می دهیم .

https://www.w3schools.com/jsref/jsref_substr.asp
https://www.w3schools.com/jsref/jsref_parseint.asp

خوب فرمول اصلی به شرح زیر است و ما با استفاده از یک حلقه for این فرمول را طراحی کرده ایم .

برای محاسبه رقم کنترل از روی سایر ارقام ، از سمت چپ و با شروع از موقعیت 1 تا موقعیت 16 ، ارقام موقعیت فرد را در 2 و ارقام موقعیت زوج را در یک ضرب می کنیم، اگر حاصل ضرب هر مرحله بیشتر از 9 شد 9 واحد از آن کم کنید تا یک رقمی شود و سپس اعداد حاصل را با هم جمع می کنیم.

اگر عدد حاصل از اجرای مرحله یک بر 10 بخش پذیر باشد ، شماره کارت صحیح قلمداد می شود در غیر اینصورت شماره کارت صحیح نمی باشد

منبع

بعد از این کد ما تابع را به صورت یک شرط اجرا می کنیم و در صورت خطا پیام را به کاربر نمایش می دهیم .

if (validateCard(cardnumber) === false)
 document.getElementById('card_er').style.display='block';

ما نیز به همین صورت این کد را ایجاد کرده ایم . بعد از این مرحله در صورت صحت شماره کارت به مرحله تشخیص لوگو بانک می رسیم .

در این بخش صرفا 6 رقم اول کارت برای ما مهم است اگر هم دقت کنید در تصویر زیر هم نوشتار شده است .

شماره کارت را که داریم پس نیاز شش رقم اول را استخراج کنیم .

var number = cardnumber.substring(6,-16);

حالا نوبت مقدار دهی به id هست که در تگ img قرار داده ایم 

var imgToSwap = document.getElementById(&quotimg0&quot);

اینجا می توانید اسم img0 تغییر دهید ولی باید در بالا هم تغییردهید .!!

در ادامه هم که کد های ساده شرطی که اگر این عدد بود این داده را بزار جای تصویر و ...

حالا ما این کد ها را کجا آورده ایم . در اینترنت تعدادی زیادی سایت از این کد های اول کارت دارند ما از آن ها استفاده کرده ایم .مثلا

https://virgool.io/keyapico/%D9%82%D9%84%D8%A7%D8%A8-hooks-%D8%AF%D8%B1-%D9%BE%D9%84%D8%A7%DA%AF%DB%8C%D9%86-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-php-vvahx2ehkqea
https://virgool.io/keyapico/%D9%BE%D8%B4%D8%AA-%D9%BE%D8%B1%D8%AF%D9%87-%D9%86%D8%B1%D9%85-%D8%A7%D9%81%D8%B2%D8%A7%D8%B1-%D8%B4%D8%A7%D8%AF-11-%D9%85%DB%8C%D9%84%DB%8C%D9%88%D9%86-%D9%86%D8%B5%D8%A8-%D9%81%D8%B9%D8%A7%D9%84-tuyrwtrpw1h3
https://virgool.io/keyapico/%D9%BE%D9%86%D8%AC-%D8%AA%D8%B1%D8%A7%D8%A8%D8%A7%D8%AA-%D8%AF%D8%A7%D8%AF%D9%87-%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA-%D8%AA%D9%88%D8%B3%D8%B7-%DB%8C%DA%A9-%D8%AA%DB%8C%D9%85-%D8%A7%DB%8C%D8%B1%D8%A7%D9%86%DB%8C-cubzadvsl7lg
https://virgool.io/keyapico/%DB%B5%DB%B0-%D9%88%D8%A8-%D8%B3%D8%B1%D9%88%DB%8C%D8%B3-%D9%87%D9%85-%D8%A7%DA%A9%D9%86%D9%88%D9%86-%D9%81%D8%B9%D8%A7%D9%84-%D9%85%DB%8C-%D8%A8%D8%A7%D8%B4%D8%AF-ck9cntmef4lf
https://virgool.io/keyapico/%D8%A7%D8%B5%D8%A7%D9%84%D8%AA-%D8%B3%D9%86%D8%AC%DB%8C-%DA%A9%D8%AF-%D9%85%D9%84%DB%8C-%D8%A8%D8%A7-%D9%85%D8%B4%D8%AE%D8%B5%D8%A7%D8%AA-%D8%B4%D9%87%D8%B1-%D9%88-%D8%A7%D8%B3%D8%AA%D8%A7%D9%86-boc864muoirc