To Form ng k bng Javascript v th input

H:
Tn:
Email:
S in Thoi:
S Lng Mua:
Ngy Nhn
Hng:
Thanh Ton:
ang K Mua

Chuyn Khon
Hng

Trc Tip Khi Giao

Xa

Lm form bng HTML v chnh sa li giao din cho p vi CSS khng kh, bn
ch cn nh my ci input type l OK. Vn nm Validate, tc l chun ha d
liu nhp vo v mt s yu cu khc na. HTML5 lm form cng rt tt, nhng c
hn ch l cha c h tr rng ri v thng nht gia cc trnh duyt, do vy chng
ta vn phi cy nh kh nhiu vo Javascript. V sau bn s bit ngoi vic bt li d
liu ti my khch th chng ta cn phi kim tra d liu mt ln na ti Server cho
chc n bng mt ngn ng lp trnh web kiu nh PHP hoc ASP.Net...Nhng y l
v sau! Hin ti chng ta ch quan tm ti Javascript thi nh.
C v chm gi hi nhiu, gi s vo ngay. Chng hn ti c Form nh u bi.
Chng ta phi bt li trong cc trng hp sau:

Ngi dng khng nhp d liu

Ngi dng khng nhp ng chun email dng aaa@bbb.ccc

Ngi dng nhp ch vo S in thoi hoc nhp hn 11 s

Ngi dng nhp ch vo S lng mua, hoc con s nh hn hoc bng 0,

hoc ln hn hoc bng 100

Ngy nhn hng khng hp chun

Ngi dng khng chn bt c hnh thc thanh ton no

Thc t l ti vit code Javascript cho Form trn ri, gi bn nhn nt ng K
Mua l bit lin, v th xem n c bt li ng nh yu cu khng. Code mu:

<script type="text/javascript">
// JavaScript Document

function validateForm() {
//H phi c in
var ho =
document.forms["myForm"]["ho"].value;
if (ho == "") {
alert("H khng c trng");
return false;
}
//Tn phi c in
var ten =
document.forms["myForm"]["ten"].value;
if (ten == "") {
alert("Tn khng c trng");
return false;
}
//Email phi c in chnh xc
var
email=document.forms["myForm"]["email"].value;
var aCong=email.indexOf("@");
var dauCham = email.lastIndexOf(".");
if (email == "") {
alert("Email khng c trng");
return false;
}
else if ((aCong<1) || (dauCham<aCong+2) ||
(dauCham+2>email.length)) {
alert("Email bn in khng chnh
xc");
return false;
}
//Nhp s in thoi
var dienThoai =
document.forms["myForm"]["dienThoai"].value;
var kiemTraDT = isNaN(dienThoai);
if (dienThoai == "") {
alert("in thoi khng c
trng");
return false;

}
if (kiemTraDT == true) {
alert("in thoi phi nh dng
s");
return false;
}
//Nhp s lng mun mua
var soLuong =
document.forms["myForm"]["soLuong"].value;
var kiemTraSL = isNaN(soLuong);
if ((soLuong == "") || (soLuong <= 0)) {
alert("S lng khng c trng
v phi ln hn 0");
return false;
}
if (soLuong > 100) {
alert("S lng mua khng c ln
hn 100");
return false;
}
if (kiemTraSL == true) {
alert("S lng mua phi nh
dng s");
return false;
}
//Chn ngy nhn hng
var nm =
document.forms["myForm"]["ngaymua"].value;
if (nm == "") {
alert("Ngy khng c trng");
return false;
}
//Chn kiu thanh ton
var ck = document.getElementById("ck");
var tt = document.getElementById("tt");
if ((ck.checked == false) && (tt.checked ==
false)) {
alert("Bn phi chn mt kiu thanh ton");

return false;
}
}
</script>
<br />
<form action="#" method="post" name="myForm"
onsubmit="return validateForm()">
<table bgcolor="#DDDDDD" id="formdangky"
style="width: 450px;">
<tbody>
<tr>
<td class="tenhang" width="118">H:</td>
<td width="320"><input name="ho" type="text"
/></td>
</tr>
<tr>
<td class="tenhang">Tn:</td>
<td><input name="ten" type="text" /></td>
</tr>
<tr>
<td class="tenhang">Email:</td>
<td><input name="email" type="text" /></td>
</tr>
<tr>
<td class="tenhang">S in Thoi:</td>
<td><input maxlength="11/" name="dienThoai"
type="text" /></td>
</tr>
<tr>
<td class="tenhang">S Lng Mua:</td>
<td><input name="soLuong" type="text" /></td>
</tr>
<tr>
<td class="tenhang">Ngy Nhn Hng:</td>
<td><input id="datepicker" name="ngaymua"
type="text" /></td>
</tr>

<tr>
<td class="tenhang">Thanh Ton:</td>
<td><input id="ck" name="thanhToan"
type="radio" value="chuyenKhoan" /> Chuyn Khon
<input id="tt" name="thanhToan"
type="radio" value="trucTiep" /> Trc Tip Khi Giao
Hng
</td>
</tr>
<tr>
<td><input name="Submit" type="submit"
value="ng K Mua" /></td>
<td><input name="Reset" type="reset"
value="Xa" /></td>
</tr>
</tbody></table>
</form>
By gi ti s gii thch code.

Th m Form:
<form name="myForm" action="#" onsubmit="return validateForm()"
method="post">
2 ci action="#" v method="post" c dng cho vic gi d liu ln my ch server
nn hin bn khng cn phi quan tm, chng ta ch cn n tn ca Form
thuc tnh name="myForm"v ni x l d liu qua onsubmit="return
validateForm()"
validateForm() chnh l tn hm m trong ta xy dng code Javascript bt li.
Ta onsubmit c ngha l, khi ngi dng nhn nt submit th d liu c chuyn
n hm validateForm()

Th input
Mt th input mu trong bi trn c dng nh ny: <input name="ten" type="text" />
Ti s dng type l text, 6 trng u tin ti s dng type ny, trng Thanh ton l
type radio, nt ng K Mua l type submit, nt Xa l type reset.
iu quan trng trong th input chnh l name ca n. Chnh thng qua name ca
Form v ca Input m Javascript ly c d liu nhp vo.

Ly d liu t input
on code mu ly d liu t th input: var ten =
document.forms["myForm"]["ten"].value;
Nh on code trn c ngha l bn ly gi tr ca th input c tn l "ten" trong Form
c tn l"myForm" v gn gi tr ly c ny vo bin var ten
Tng t cho email: var email=document.forms["myForm"]["email"].value;

Khng c b trng d liu

var ten = document.forms["myForm"]["ten"].value;
if (ten == "") {
alert("Tn khng c trng");
return false;
}
Theo , sau khi ly c d liu t th input v gn vo bin ten, chng trnh dng
hm if kim tra ten c rng hay khng - if(ten==""). Nu tha mn iu kin rng
s c hp thng bo "Tn khng c trng" v ta dng hm alert iu khin tc
v ny, cui cng return false.

Kim tra d liu nhp vo c phi l s khng

var dienThoai = document.forms["myForm"]["dienThoai"].value;
var kiemTraDT = isNaN(dienThoai);
if (kiemTraDT == true) {
alert("in thoi phi nh dng s");
return false;
}
Hm dng kim tra s l isNaN - vit tt ca is Not a Number. Nu isNaN tr
v gi tr TRUE ngha l khng phi l mt s.

Kim tra Email hp chun

C l vi a s mi ngi th y l code phc tp nht (vi mnh cng th). a ch
email chnh xc phi tha mn iu kin sau:

Phi c k t @

Trc @ phi c t nht 1 k t

Phi c t nht 1 du chm trong email

Phi c t nht 1 k t ng gia @ v du chm

Du chm khng c ng v tr cui cng

var email=document.forms["myForm"]["email"].value;
var aCong=email.indexOf("@");
var dauCham = email.lastIndexOf(".");
if (email == "") {
alert("Email khng c trng");
return false;
}
else if ((aCong<1) || (dauCham<aCong+2) || (dauCham+2>email.length)) {
alert("Email bn in khng chnh xc");
return false;
}
Chng ta cn ch n lnh indexOf, n s xc nh s k t ng trc n tnh t
tri sang. V d, email ab@xy.com c gi tr email.indexOf("@") l 2 v c 2 k t l
a v b ng trc @
email.indexOf(".") c gi tr l 5 v c 5 k t ng trc du . l a, b, @, x, y
Nu khng c k t cn tm trong chui, hm indexOf s tr v -1.
n y bn t hi email.lastIndexOf(".") c ngha g. Ht sc ch ch last. Lnh
ny cng l xc nh s k t ng trc du chm nhng l du chm cui cng.
Chng hn email xyz.com@gmail.com, th th du chm cui cng l du chm sau
ch gmail ch khng phi sau ch xyz. Gi chng ta cng tm hiu ngha code.
var aCong=email.indexOf("@");
if (aCong<1)
Ch c 2 trng hp xy ra khi aCong<1:

Khng c @ trong a ch email, lc ny email.indexOf("@") = -1

aCong = 0, ngha l khng c k t no ng trc @, hay email nhp vo c

dng @klm.com - tc l khng hp chun

Vy l vi cu lnh trn ta p d liu phi c @, v trc @ phi c k t

Sau @ phi c t nht 1 k t sau mi n du chm do , email hp chun th s
k t ng trc du chm lun ln hn s k t ng trc @ t nht 2 n v - tc
l dauCham >= aCong + 2, ngc li iu ny th email khng hp l, ni cch
khc l: dauCham < aCong + 2

Lnh trn chng ta p phi tn ti du chm trong email, ngoi ra n cng buc
gia du chm cui cng v email phi c t nht 1 k t.
Tip n ta xem xt cu lnh ngn khng cho du chm l k t cui cng trong
email.
var dauCham = email.lastIndexOf(".");
dauCham+2>email.length

email.length xc nh s k t ca email

Sau du chm cui cng phi c t nht 1 k t do vy nu dauCham + 2 >

email.length ngha l email khng hp chun.