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

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

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

javascript validator

Wiki

برای مثال :

postData={
    name:$("#i_name").val(),
    family:$("#i_family").val(),
    email:$("#i_email").val(),
    phone:$("#i_phone").val(),
    password:$("#i_password").val(),
    password2:$("#i_password2").val(),
    captcha:$("#i_captcha").val()
  }

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

حالا میخواهیم برسی کنیم که فیلد ها توسط کاربر پر شده باشند ( خالی نباشند ) برای این منظور از کد زیر استفاده میکنیم

validateNull(postData,"@pn را وارد نکرده اید ");

این کد تمام پارامتر ها را در postData برسی میکند تا خالی نباشند در صورتی که یکی از فیلد ها خالی باشد پیام خروجی آن مانند این پیام است

{"ok":false,msg:"نام خانوادگی را وارد نکردید"}

عبارت @pn که در کد بالا مشاهده می کنید نام پارامتر را برمیگرداند

حالا فرض کنید در فرم ما فیلد شماره تلفن اختیاری است و ما نمیخواهیم شماره تلفن توسط تابع validateNull برسی شود برای این منظور کافیه نام پارامتر های اختیاری را به صورت ارایه به این تابع اضافه کنیم

validateNull(postData,"@pn را وارد نکرده اید ",['phone']);

---

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

validateLenght(postData,['name','family'],3,25,'@pn باید @len از @chl کارکتر باشد');

پارامتر اول  ( postData ) شامل تمام پارامتر های ما است در پارامتر بعدی تایین میکنیم که محدودیت تعداد کارکتر ها برای کدام پارامتر ها باید برسی شود 3 حداقل تعداد و 25 حداکثر تعداد کارکتر است و پارامتر اخر هم مربوط به پیام خطای اعتبارسنجی است

اگر بجای عدد بیشترین تعداد کارکتر null بگذارید محدودیت بیشتریت تعداد کارکتر در نظر گرفته نمیشود برای کم ترین مقدار هم به همین صورت است

عبارت @pn نام پارامتر و  @chl حداقل یا حداکثر تعداد کارکتر مجاز و @len نوع محدودیت را جایگزین می کند حالا اگر نامی طولانی تر از 25 کارکتر وارد کرده باشیم  پیام خطای کد بالا به صورت زیر است

{"ok":false,"msg":"نام نباید بیشتر از 25 کارکتر باشد"}

---

با استفاده از تابع validateEmail ایمیل کاربر را برسی میکنیم :

ValidateEmail(postData['email'],'ایمیل را به درستی وارد نکرده اید');

---

برسی رمز عبور و تکرار رمز عبور :

validateCheckPassword(postData['password'],postData['password2'],'رمز عبور با تکرار آن یکسان نیست');

---

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

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

validate=getValidateResult();

if(validate.ok==false){

show_error_messege(validate.msg);
}
else{
// successful 
}

کد کلی آن به این صورت می شود

postData={
    name:$("#i_name").val(),
    family:$("#i_family").val(),
    email:$("#i_email").val(),
    phone:$("#i_phone").val(),
    password:$("#i_password").val(),
    password2:$("#i_password2").val(),
    captcha:$("#i_captcha").val()
  }

validateLenght(postData,['password','password2'],6,null,'@pn باید @len از @chl کارکتر باشد');
// error resulr = {"ok":false,"msg":"رمز عبور نباید کوچکتر از 6 کارکتر باشد"}
 validateLenght(postData,['name','family'],3,25,'@pn باید @len از @chl کارکتر باشد');
validateNull(postData,"@pn را وارد نکرده اید ",['phone']);

validateCheckPassword(postData['password'],postData['password2'],'رمز عبور با تکرار آن یکسان نیست');
    
ValidateEmail(postData['email'],'ایمیل را به درستی وارد نکرده اید');
     
validate=getValidateResult();

if(validate.ok==false){

show_error_messege(validate.msg);
}
else{
// successful 
}

در فایل جاوا اسکریپت تابع زیر قرار دارد که میتوانید پارامتر هایی که در فرمتان استفاده کردید ولی در تابع وجود ندارد را به آن اضافه کنید

function validatePN(lan='fa') {
 var pn_fa={
 'name':'نام',
 'family':'نام خانوادگی',
 'email':'ایمیل',
 'phone':'شماره تلفن',
 'captcha':'تصویر امنیتی',
 'password':'رمز عبور',
 'password2':'تکرار رمز عبور',
 'min':'کوچکتر',
 'max':'بزرگتر'
 };
 if (lan=='fa') {
 return pn_fa;
 }

}