Web development blog

Энэ удаагийн form цувралаараа form validation буюу формын талбарууд дээрхи утгууд үнэн зөв, байх ёстой өгөгдлүүд нь байгаа эсэхийг клиент талд нь javascript ашиглан шалгах аргыг авч үзье. Ер нь веб програмчлалд үр бүтээлтэй, найдвартай, хурдан ажилуулахын тулд клиент талд javascript-ийг өргөн ашигладаг. Ийм ч учир javascript хэлний хэрэглээ, түүнийг ашигласан  фрамеворкүүд өнөөдөр хүчээ аван хөгжиж байна.  Энэ үйлдлийг сервер талд маш нарийн хийж болно (хийх ч ёстой). Бүх зүйлийг ганц сервер талд хийх биш клиент талд ядаж байх ёстой утгуудыг шалгачихдаг  байх хэрэгтэй юм. Энэ нь бүх юмыг серверт илгээн шалгуулснаас хурднаас гадна хэрэглэж байгаа хүндээ ч амар байдаг. Ингээд хэрэглэгчийн бүртгэлийн форм гэсэн жишээ авч үзье. Форм доорхи хэлбэртэй байна.

Жишээ форм

Формны талбарууд бүгд утгатай байх ёстой. Эдгээрийг формыг submit (серверт илгээх ) хийх үед утгуудыг шалгаж үзээд болж байвал илгээгээд харин болохгүй байвал илгээхгүй алдааны мэдээллийг нь харуулъя. Үүний тулд формны onsubmit эвентийг ашиглана.

<form id="form1" name="form1" method="post" action="" class="myForm" onsubmit="return validateFormOnSubmit(this);">
</form>

энд байгаа validateFormOnSubmit(this) функц True эсвэл False -ийн аль нэгийг буцаана. Хэрвээ False Утга буцаж ирсэн бол ямар нэг талбарт утгагүй эсвэл алдаатай гэсэн үг бөгөөд формыг серверт илгээхгүй. Харин True утга буцаж ирж байгаа бол ямар нэг алдаагүй учир формыг серверт илгээнэ. Эндээс харвал onsubmit event үнэн утгатай байвал форм submit хийгддэг байх нь. Энэ функц манай жишээний customfunctions.js дотор бий. Уг функц нь тухайн форм бүрт зориулж хийдэнэ. Өөрөөр хэлбэл таны форм ямар ямар талбаруудтай тэдгээрээс аль нь заавал утгатай байх зэргээс хамааран өөрчлөгдөж байх хэрэглэгчийн функц юм.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function validateFormOnSubmit(theForm) {
var aldaa = "";
 
  aldaa += validateUsername(theForm.ner,'Нэр');
  aldaa += validatePassword(theForm.nuutsug,'Нууц үг');
  aldaa += validateEmail(theForm.email,'E-Mail');
  aldaa += validateSelectField(theForm.tursunon,'Төрсөн он');
 
  if (aldaa != "") {
    alert("Дараахь алдаа(нууд) гарсан тул та нягтлаад дахин оролдоно уу:\n\n" + aldaa);
    return false;
  }
 
  return true;
}

Энэ функцийн санаа нь aldaa гэсэн хувьсагч эхлэд хоосон утгатай зарлагдана. Формны талбаруудын утгыг шалгах функцүүд түүнд утга буцаана. Байх ёстой зөв өгөгдөл нь орсон бол хоосон стринг харин буруу өгөгдөл бол алдааг нь мөн стрингээр буцаана. Эцэст нь aldaa гэсэн стринг хоосон биш байвал алдаа гарчээ гэж үзээд alert-аар aldaa -г алдааны мэдээлэл болгон харуулаад False утга буцаан функцын ажиллагааг дуусгалаа. Хэрвээ aldaa хувьссагчид ямар нэгэн юм буцаж ирээгүй өөрөөр хэлбэл анх зарлагдсан шигээ хоосон хэвээрээ байвал алдаа гараагүй байна гэж үзээд True утга буцаагаад функц дуусаж байна.

Энэ функцыг дуудахдаа validateFormOnSubmit(this) гэж дуудсан. Энд байгаа this бол тухайн форм өөрөө юм. Ямар нэг класс дотор this өөрийгөө зааж байдагтай адилхан. Харин функцийн бие дотороо бол түүнийг theForm гэж тодорхойлоод явсан байна. theForm.ner, theForm.email, theForm.tursunon, theForm.nuutsug гэж HTML formны талбаруудад хандсан байна. Формы талбаруудыг JS дээр ингэж барьж авч болдог байх нь. Харин одоо утгануудаа яг шалгаж байгаа функцүүдээ авч үзье.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

// JavaScript Document
function validateEmpty(fld, what) {
    var error = "";
 
    if (fld.value.length == 0) {
        fld.style.background = 'Yellow';
        error = what + " талбарт утга оруулна уу.\n";
    } else {
        fld.style.background = 'White';
    }
    return error;
}
function validateSelectField(fld, what) {
    var error = "";
 
    if (fld.value == 0) {
        fld.style.background = 'Yellow';
        error = what + " талбараа сонгоно уу.\n";
    } else {
        fld.style.background = 'White';
    }
    return error;
}
function validateUsername(fld, what) {
    var error = "";
    var illegalChars = /\W/; // allow letters, numbers, and underscores
 
    if (fld.value == "") {
        fld.style.background = 'Yellow';
        error = what + " талбарт утга оруулна уу.\n";
    } else if ((fld.value.length < = 1) || (fld.value.length > 30)) {
        fld.style.background = 'Yellow';
        error = what+" -ийн урт 1 - 30 хооронд байх ёстой. \n";
    } else if (illegalChars.test(fld.value)) {
        fld.style.background = 'Yellow';
        error = what + " талбарт зөвшөөрөгдөөгүй тэмдэгтүүд орсон байна.\n";
    } else {
        fld.style.background = 'White';
    }
    return error;
}
function validateDate(fld, what) {
    var validformat = /^\d{4}\-\d{2}\-\d{2}$/
 
	if (fld.value == "") {
        fld.style.background = 'Yellow';
        error = what + " талбарт утга оруулна уу.\n";
    } else if (!validformat.test(fld.value)) {
		fld.style.background = 'Yellow';
        error = what + " талбарын формат буруу байна. YYYY-MM-DD форматаар утга оруулна уу.\n";
 
    }
    return error;
}
function validateTextField(fld,what) {
    var error = "";
    //var illegalChars = /\W/; // allow letters, numbers, and underscores
 
    if (fld.value == "") {
        fld.style.background = 'Yellow';
        error = what+" талбарт утга оруулана уу \n";
    } else if ((fld.value.length < = 1) || (fld.value.length > 30)) {
        fld.style.background = 'Yellow';
       error = what+" -ийн урт 1 - 30 хооронд байх ёстой. \n";
    }  else {
        fld.style.background = 'White';
    }
    return error;
}
 
function validatePassword(fld,what) {
    var error = "";
    var illegalChars = /[\W_]/; // allow only letters and numbers 
 
    if (fld.value == "") {
        fld.style.background = 'Yellow';
        error = "Нууц үгээ оруулна уу.\n";
    } else if ((fld.value.length < 6) || (fld.value.length > 30)) {
        error = "Таны нууц үг 6-30 тэмдэгт байх шаардлагатай. \n";
        fld.style.background = 'Yellow';
    } else if (illegalChars.test(fld.value)) {
        error = "Таны нууц үг латин үсэг эсвэл цифрүүдээс бүрдсэн байх шаардлагатай.\n";
        fld.style.background = 'Yellow';
    } else {
        fld.style.background = 'White';
    }
   return error;
}
//else if (!((fld.value.search(/(a-z)+/)) && (fld.value.search(/(0-9)+/)))) {
//        error = "The password must contain at least one numeral.\n";
//        fld.style.background = 'Yellow';
 //   }
function trim(s)
{
  return s.replace(/^\s+|\s+$/, '');
}
 
function validateEmail(fld, what) {
    var error="";
    var tfld = trim(fld.value);                        // value of field with whitespace trimmed off
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\< \>\,\;\:\\\"\[\]]/ ;
 
    if (fld.value == "") {
        fld.style.background = 'Yellow';
        error = "Е-майл ээ оруулна уу.\n";
    } else if (!emailFilter.test(tfld)) {              //test email for illegal characters
        fld.style.background = 'Yellow';
        error = "Е-майл хаяг буруу байна.\n";
    } else if (fld.value.match(illegalChars)) {
        fld.style.background = 'Yellow';
        error = "Е-майл хаягт зөвшөөрөгдөөгүй тэмдэгтүүд орсон байна.\n";
    } else {
        fld.style.background = 'White';
    }
    return error;
}

Функцүүд нь 2 параметртай байна. Эхнийх нь утгаа шалгуулах гэж байгаа формны талбар обьект хэлбэрээр, 2 дахь нь тухайн талбарын нэр стрингээр байна. Гэхдээ энэ нэр бол уг талбарыг тодорхойлсон нэр биш харин уг талбарт ямар утга оруулахыг заасан нэр (зүгээр л үг) байна. Алдааны мэдээлэл харуулахад тийм талбар дээр алдаа байна гэдэгт ашиглагдах зорилготой. Функцүүдийг нэрнээс ямар талбарыг шалгах нь ойлгомжтой харагдаж байна. fld.value.length гэж гаднаас орж ирсэн талбарын утгын уртыг авч байна. хэрвээ энэ нь 0 байвал энэ талбарт утга оруулаагүй гэсэн үг. Эсвэл fld.value==”" үнэн байвал бас л хоосон байна. fld.value.length -аар уртыг авч утгын урт богинийг if ((fld.value.length < = 1) || (fld.value.length > 30)) гэх мэтээр шалгасан байна.

Select талбарын хувьд сонголт хийгдээгүй байвал утга нь 0 утгатай байхаар хийгдсэн байна. Үүнийг та бүхийн өөрийн ажилд тохируулан засаж болно. Манай жишээний хувьд дараахь байдалтай байна.

<option value="0" selected="selected">Сонгоно уу</option>

Харин validformat = /^\d{4}\-\d{2}\-\d{2}$/ гэсэн мөр заримд нь юу юм бол гэсэн бодол төрүүлж байж магад. Энэ бол веб програмчлалд өргөн ашиглагддаг regular expression юм. Делфи дээр maskedit гэж байдаг шиг л зүйл. Ингэж regular expression -аа тодорхойлчихоод түүнийхээ дагуу байгаа эсэхийг validformat.test(fld.value) гэж шалгаж байна. E-mail шалгах энэ тэр дээр нилээд төвөгтэй regular expression ашигласан байна.

Иймэрхүү байдалтай утгуудаа шалгаад алдаа гарсан бол уг талбарын фоныг шар өнгөтэй болгож байна. Үүний тулд fld.style.background = ‘Yellow’; гэсэн байна. fld.style.background = ‘#FFCC00′; гээд өнгийг кодоор нь ч өгч болно. Ер нь fld.style гэж байгаад CSS -д тодорхойлогддаг зүйлийг бичээд, авч болох утгануудыг олгоод байж болох нь эндээс харагдаж байна.

за ингээд жишээг ажиллуулж үзнэ үү. Алдаа дутагдалтай зүйл эсвэл нэмж тодоруулж асуух зүйл байх аваас коммент бичиж үлдээнэ үү.

Ажиллуулж үзэх | Энэ жишээг татаж авах

Жич: Энэ бичлэг веб програмчлалд суралцаж байгаа HTML, JS -ийн зохих мэдлэгтэй хүмүүст зориулагдав.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

admin HTML, Javascript form, form validation, HTML, Javascript, regular expression

(No Ratings Yet)

 Loading ...