JQueryni har bir dasturchi yaxshi ko’rib, sevib o’z loyihalarida ishlatsa kerak deb o’ylayman. Chunki JQuery bilan ko’p muammolarni osongina hal qilamiz. Bu o’z navbatida foydalanuvchiga ham bir qancha qulayliklarni yaratadi. Men jqueryni o’rganishimga sabab bo’lgan narsa bu ajax edi :). Men bu maqolada ajax haqida gapirmoqchi emasman albatda. Ajaxga ham hali keying maqolalarimizda to’xtalib o’tamiz nasib etsa.
Biz (men boshlovchi)dasturchilar web loyihalarni amalga oshirishimizda ko’pgina kiritish lozim bo’lgan (input, textare, radio, checkbox va hk) teglarni to’ldirilganligi yani u true qiymatni olganligini tekshirishimiz lozim bo’ladi. Buni phpda yoki frameworklarda optimal bir qancha yechimlari mavjud. Biz esa buni Jqueryning validation plugini orqali osongina amalga oshiramiz.
Bizning loyihamizda ikkita input bo’lsin va birinchisida login kiritilsin hamda ikkinchisida parol kiritilsin. Agar login inputimiz to’ldirilmagan bo’lsa “Siz loginni kiritmadingiz” hamda parolni kiritmagan bo’lsa “Siz parolni kiritmadingiz” deya ogohlantirish bersin. Bundan tashqari qolgan logikalarni ham maqolamiz davomida ko’rib chiqamiz.

O’qishimiz va yuklab olishimiz lozim bo’lgan linklar:
Jquery validation pluginini yuklab olish
Jqueryning validation plugining validate() funksiyasini chaqirish va unga sozlanmalar berish orqaliy amalga oshiramiz.
validation.php deb file yaratamiz va unga jqueryni va jquery validationni chaqirib olamiz. Login va parol formasini ham yaratib olamiz.
Jqueryni chaqirib olamiz:

<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.validate.js"></script>

Login form yaratamiz.

<form id="forma" method="post" action="#">
    <p>
        <label>Loginingizni kiriting</label>
        <input type="text" name="login" id="login" placeholder="Loginingizniiriting" required />
    </p>
    <p>
        <label>Parolingizni kiriting</label>
        <input type="password" name="pswd" id="pswd" placeholder="Parolingizni kiriting" required />
    </p>       
    <p>
        <input type="submit" value="kirish" />
    </p>
</form>

Scriptimizni yozamiz.

<script>
    $("#forma").validate({
       rules:{
        login: {required: true },
        pswd:"required"
       },
       messages:{
        login:"Siz logingizni kiritmadingiz" ,
        pswd:"Siz parolingini kiritmadingiz"
       } 
    });  
</script>

Scriptni tahlil qilamiz:

Validat funksiyasining sozlanmalarida ikkita massiv bor birinchisi rules ya’ni qoidalar, ikkinchisi messages ya’ni xabarlardir. Rulesga qaraydigan bo’lsak login(login inputimiz idsi) qiymatini figurali qavslar ichida shartni berayapman ya’ni required true qiymat bo’lsa u qo’uilgan shartni bajaradi aks holda qo’yilgan shartni bajarmaydi. Endi rulesimizning ikkinchi qiymati pswd(Parol inputimiz idsi) ga nazar tashlaylik unda string qiymat berilgan “required” bunda rules o’zi {required: true } bu ko’rinishga canvertatsiya qilib oladi. Messagesda esa yuqoridagi shartlarning qiymatini xabar orqaliy chiqarib bermoqda.

Endi emailni tekshirishni ko’rib chiqamiz.
Yangi email inputini qo’shamiz va yuqorida yozgan validatening sozlanmalariga emailni kiritamiz.

email: {
            required: true,
            email: true
        }

Ushbu scriptda ikkita shart berilayapti birinchisi uning to’ldirilganligi, ikkinchisi esa email farmatida bo’lishi. Uning xabari quydagi ko’rinishda hosil bo’ladi.

email: {
      required: "Emailingizni kiriting",
     email: "Emailingizning farmati quydagicha bo'lishi shart: name@domain.com"
 }

Sozlanmalarni o’rganishda davom etamiz va navbatdagi sozlanmamiz minlengthdir. Ushbu sozlanmamizni login inputida ko’rib chiqamiz. Bilamizki loginlar odatda 5 yoki 6 ta dan kam bo’lmasligi kerak. Bizda esa 5 tadan kam bo’lmasin. Agar kam bo’lsa 5 tadan kam bo’lmasin deb chiqarib bersin.
Rulesdagi shartimiz:

login:{required: true,
        minlength:5
         }

Messagesdagi xabarimiz:

login:{
         required:"Siz logingizni kiritmadingiz",
         minlength : jQuery.format("{0} ta dan kam bo'lmasligi shart")
        }

Qolgan sozlanmalarini bu yerdan o’qib o’rganishingiz mumkin.
Sourceni yuklab olish