Home > HTML, Javascript > Form 3: Form validation

Form 3: Form validation

February 26th, 2009 Leave a comment Go to comments

Энэ удаагийн 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 &lt; = 1) || (fld.value.length &gt; 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 &lt; = 1) || (fld.value.length &gt; 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 &lt; 6) || (fld.value.length &gt; 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)+/)) &amp;&amp; (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= /[\(\)\&lt; \&gt;\,\;\:\\\"\[\]]/ ;
 
    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.

  1. February 26th, 2009 at 19:44 | #1

    Thanks Soyol erdenee. sain ajil bolj eee. Neg yum guie aa ene wordpress iig yaaj install hiih vee hicheel yum uu medeelel ogch boloh uu thanks. Ajilt chin amjilt husie ee. 😀

  2. February 26th, 2009 at 20:22 | #2

    WordPress суулгах товч заавар.

    1. http://wordpress.org/ аас install-ийг нь татаж аваад задлана.
    2. Үүний дараа wp-config-sample.php файлыг wp-config.php болгож хадгалахдаа түүн доторхи баазийн холболтын тохируулгыг зааж өгнө. Энэ нь доорхи хэдэн зүйл юм.
    define(‘DB_NAME’, ‘abcdf_baaziinner’);

    /** MySQL database username */
    define(‘DB_USER’, ‘abcdf_baaziinhereglegchiinner’);

    /** MySQL database password */
    define(‘DB_PASSWORD’, ‘nuutsug’);

    /** MySQL hostname */
    define(‘DB_HOST’, ‘localhost’);

    /** Database Charset to use in creating database tables. */
    define(‘DB_CHARSET’, ‘utf8’);

    3. wordpress фолдер доторхи файлуудыг өөрийн хоструу хуулна. Хэрвээ хост чинь CPANEL -тай бол public_html дотор хуулна.

    4. http://www.chiniidomainner.com/wp-admin/install.php гэж ажиллуулан блогоо инсталл хийнэ.

    5. http://www.chiniidomainner.com/wp-login.php хуудасаар admin гэсэн хэрэглэгч ба 4 р алхамд гаргаж өгсөн нууц үгийг ашиглан холбогдоно. Ингээд саяны авто генераци хийгдсэн нууц үгээ солихоос гадна блогоо илүү нарийвүлан тохируулах, шинэ бичлэг оруулах боломжтой болно.

    ер нь нэг сайхан темплате олж аваад түүнийгээ өөрөө өөрчлөөд бүүр гоё болгож болно. Үүний тулд HTML, CSS, PHP -ийн жаахан мэдлэг хэрэгтэй юм байна лээ. Мөн plugins -үүдийг ашиглан блогийнхоо боломжийг сайжируулаад байж болно. Амжилт хүсье. Оролдоод үзээрэй.

    5.

  3. baku
    March 20th, 2009 at 14:51 | #3

    за энэ regular expression гэдэг зүйл нэлээд явдалтай золиг байгаан хэр баргийн хүн шууд өөрөө бичдэггүй байхаа. гэхдээ Regex Buddy гээд нэг програм байгаа энэ regular expression-ийг шууд танд үүсгэж өгнө. сайхан эд шүү татах холбоосыг үлдээлээ татаад аваарай за амжилт http://rs519.rapidshare.com/files/176507921/regbodo.rar мөн ганц Regex Buddy бус өөр олон програм байгаа та бүхэн өөрсдөө олоод авна биз ээ

  4. baku
    March 20th, 2009 at 14:57 | #4

    уг програмын албан ёсны сайт нь http://www.regexbuddy.com/create.html

  5. baku
    March 20th, 2009 at 15:29 | #5

    http://gskinner.com/RegExr/ It is a Super site in online. Generate any Regular Expression you may need. GL ➡

  6. Tulga
    May 6th, 2009 at 18:27 | #6

    Text field deer javascript validation xiixdee REGEX ashiglasan zugeer baix. regex ‘/^\s*$/’

  7. August 18th, 2009 at 10:06 | #7

    Saihan boljee Neg ym asuuyaa ene Reset gesen buttonii text fielduudiig arilgaad bgaa onclick uzegdel ni eroosoo bhgui bj arilgaad bhiin ene ih sonin ym aa eniig neg tailbarlaad ogoooch eswel bi haigaad olohgui bgaa ym uu

  8. August 18th, 2009 at 10:28 | #8

    HTML-d er ni 3 turliin button todorhoilgdson.

    1) submit ene bas l chinii heleed baigaa shig onclick baihgyi buguu shuud tuhain formiig formnii action attributad zaasan haygaar ilgeeh uurgetei. Hervee action hooson baival tuhain huudasruu ilgeene.
    2)reset button ene bas onclick baihgyi eruusuu l uureg ni reset buguud input tagiin type attribut deer reset gesen utga avdag.
    3)Engiin button. Ene button ashiglahiin tuld harin onclick geh met eventuudiig ni ashiglan programchlaldag.

    Tegeheer reset submit tovchnuud yamar neg eventgyigeer deerhi yildeluudiig gyitsetgene.

  9. enkhee
    August 18th, 2009 at 11:39 | #9

    Pooh iim hurdan hariu ilgeesend bayrlalaa tiim bhaa bi .NET aspx ahigladag l daa odoo php bie daaj surah geed l uzeed bgaa php ch buh ym aa ooroo hiideg bolohoor joohon ydargaatai ym shig mortloo uneheer sonirholtoi goy ym aa bayrlaa tanii ene hicheeluudees chin l php-iin oilgoltiig sain awch bn shu hicheelee urgeljluuleerei :mrgreen:

  10. ulzii
    August 19th, 2009 at 01:50 | #10

    html button element yugaaraa php-tei holbootoi yum bol doo 😉

  11. daaj
    October 6th, 2009 at 10:51 | #11

    javascript-r $result=$a.’*’.$b.’*’.$c; эдгээр a,b,c утгуудыг салгаж авах вэ?

  12. beggy
    July 2nd, 2010 at 12:28 | #12

    http://www.webcheatsheet.com/javascript/form_validation.php Мэдээгээ хаанаас ч хуулсан байлаа гэсэн эх сурвалжийг дурдаж баймаар юм.

  13. July 2nd, 2010 at 14:55 | #13

    Beggy chi ene site-iig eh survalj ni gej chi yaj medev ee. Bi ene jisheeg olon jiliin umnu uur gazaraas (haramsaltai sanahgyi baigaa yum) olj ashiglaj baisan sanagdah yum teriigee surch baigaa huuhduuded zoriulan MONGOLoor tailbarlan tavisan yum.

  1. No trackbacks yet.