اعتبار سنجی تکست باکس (input) به صورت زنده توسط ایجکس

در این آموزش قصد داریم توسط jquery و ajax (ایجکس) ، صحت متن وارد شده در تکست باکس یا همان text input  در html را بررسی کنیم.

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

در این روش متن ورودی با کمک Ajax به سمت سرور ارسال میشود و در سمت بک اند و php یا asp شروط مورد نظر را اجرا میکنیم و خروجی مناسب را چاپ میکنیم و به سمت فرانت میفرستیم تا در آنجا نیز تصمیمات خود را اجرا و نمایش دهیم.

در این مثال قصد داریم یک فیلد تکست باکس که برای وارد کردن شماره همراه میباشد را اعتبار سنجی کنیم که اولا ساختار شماره همراه صحیح باشد و دوما در دیتابیس چک کنیم که قبلا توسط شخص دیگر استفاده نشده باشد.

کدهای این آموزش در codepen.io نوشته شده تا بتوانید تست کنید.

مشاهده و تست کد ها

برای تست یک شماره همراه با ساختار اشتباه وارد کنید مثلا 0 ابتدایی را نگذارید یا اعداد در هم وارد کنید تا ارور را ببینید.

برای دیدن خطای تکراری بودن هم شماره 09000000000 را وارد کنید.

کد های زیر سمت سرور و php است و در سرور ژوپین نوشته شده است تا بتوانید تست کنید.

$value = $_POST['value'];

if(!preg_match('/^09\d{9}$/iu',$value)){

   echo 'ساختار شماره همراه صحیح نیست'; 

   exit;

}

if($value=="09000000000"){ 

   echo 'شماره همراه تکراری است.'; 

   exit;

}

die('OK');

زمانی که jquery توسط ایجکس و $.post مقدار تکست باکس را با متد post با نام value به سمت php میفرستند ُ ما در php توسط $_POST آن را دریافت میکنیم.

در شرط اول چک کردیم که ساختار موبایل درست باشد یعنی اول آن ۰ باشد و بعد ۹ تا عدد باشد تا آخر 

شرط دوم هم برای تکراری بودن است که شما میتوانید مثلا از دیتابیس خود مقدار را چک کنید ولی ما برای سهولت کار دستی این کار را کردیم جهت تست.

در آخر اگر همه چیز درست باشد OK به سمت فرانت اند و پاسخ ajax میرود و ما در آنجا شرط کردیم اگر خروجی OK نبود ارور را بسازد و متن را چاپ کند.