Bu makalede javascript ile form kontrolü uygulaması yapacağız. Çok basitçe oluşturulmuş formdan (kullanıcı adı, şifre ve e-mail) javascript ile girilen değerleri alıp, istenilen koşullarda değerler girilmiş mi kontrol edip, doğru şekilde değerler girildiyse post edilmesini sağlayacağız. Javascript, client-side (kullanıcı tarafında) çalıştığı için form kontrol uygulaması butona tıklandıktan sonra çalışacaktır. Eğer anlık olarak form kontrolü istiyorsanız jQuery ile anlık form kontrolü yazısını inceleyebilirsiniz.
1) Kullanıcı adı boş olamaz, 4 karakterden az olamaz.
2) Şifre boş olamaz.
3) Şifre tekrarı boş olamaz.
4) Şifre ve şifre tekrarı farklı olamaz.
5) E-Mail boş olamaz, geçersiz e-mail olamaz.
Not: Eğer bütün değerler doğru girildiyse hazırladığımız sayfa sayesinde dizi içerisinde return edilecektir.
function isValid(frm)
{
var kadi = frm.kadi.value;
var sifre1 = frm.sifre1.value;
var sifre2 = frm.sifre2.value;
var email = frm.email.value;
var atpos=email.indexOf("@");
var dotpos=email.lastIndexOf(".");
if ( kadi==null || kadi=="" || kadi.length < 4 )
{
alert("Kullanıcı adı 4 karakterden az olamaz");
return false;
}
if ( sifre1 == null || sifre1 == "" || sifre2 == null || sifre2 == "")
{
alert("Şifreyi boş bırakmayın");
return false;
}
if ( !(sifre1 == sifre2) )
{
alert("Şifreler eşleşmiyor");
return false;
}
if ( atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length )
{
alert("Geçerli email adresi girin");
return false;
}
return true;
}
<div id="uyelik_formu">
<form name="uye_formu" action="jscript_form_kontrolu_post.php" onsubmit="return isValid(this)" method="post">
<label>Kullanıcı Adı:</label>
<input type="text" name="kadi">
<br>
<label>Şifre:</label>
<input type="password" name="sifre1">
<br>
<label>Şifre (Tekrar):</label>
<input type="password" name="sifre2">
<br>
<label>E-Mail:</label>
<input type="text" name="email">
<br>
<input type="submit" value="Kaydet!">
</form>
</div>
#uyelik_formu
{
padding: 10px;
width: 400px;
border: 1px solid black;
}
label
{
float: left;
width: 150px;
}
Ana Sayfa
javascript 
Paylaş
Oyla