دوست عزیز این یک فرم ساده که بوسیله جاوا اسکریپت چک میشود. تا وقتی کاربر email و username و password خود را وارد نکرده دکمه submit فعال نخواهد شد و همچنین فرمت صحیح email و اینکه تعداد password از یک مقدار مشخص بیشتر باشد نیز چک میشود...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Default</title>
<meta http-equiv="content-type" content="text/xml;charset=utf-8" />
<meta name="keywords" content="" />
<meta name="language" content="Farsi" />
<link rel="icon" href="" type="image/jpeg" />
<link rel="shortcu icon" href="" type="image/jpeg" />
<link rel="stylesheet" type="text/css" href="" />
<script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
<style type="text/css">
#myForm{border : 2px double #424242;margin:2em auto;text-align:center;width:500px;
box-shadow:8px 8px 8px #888;padding-bottom:10px;}
#user{margin-bottom:10px;position:relative;left:-20px;}
#sub{}
#pwd{margin-bottom:10px;position:relative;left:-15px;}
#email{margin-bottom:10px;}
label{position:relative;left:-25px;}
</style>
<script type="text/javascript">
//<=!=[=C=D=A=T=A=[//this line if for xhtml validation
var Form=new function()
{
this.form= null;
this.email=null;
this.username=null;
this.pwd=null;
this.init=function()
{
var self=Form;
self.form=document.getElementById('myForm');
self.output=document.getElementById('output');
self.username=self.form.username;
self.pwd=self.form.pwd;
self.email=self.form.email;
self.submit=self.form.submit;
self.divProc=null;
self.submit.disabled=true;
self.email.onchange=self.checkEmail;
self.username.onchange=self.checkUsername;
self.pwd.onchange=self.checkPwd;
document.onkeyup=self.procInput;
//self.submit.onclick=self.sendData;
self.email.focus();
}//nd of init method
this.checkEmail=function()
{
var self=Form;
var pat=/^.+@.+\.com/;
if(!pat.test(self.email.value))
{
self.email.style.backgroundColor='red';
return false;
}
else
{
self.email.style.backgroundColor='#fff';
return true;
}
}
this.checkPwd=function()
{
var self=Form;
var pat=/[a-zA-Z0-9]{5,}/;
if(!pat.test(self.pwd.value))
{
self.pwd.style.backgroundColor='red';
return false;
}
else
{
self.pwd.style.backgroundColor='#fff';
return true;
}
}
this.checkUsername=function()
{
var self=Form;
var pat=/[a-zA-Z\'_]{1,}/;
if(!pat.test(self.username.value))
{
self.username.style.backgroundColor='red';
return false;
}
else
{
self.username.style.backgroundColor='#fff';
return true;
}
}
this.procInput=function(e)
{
var self=Form;
if(!e)
{
e=window.event;
}
self.keycode=e.keyCode;
if (self.email.value != '' &&
self.username.value != '' &&
self.pwd.value != '' )
{
if (self.checkEmail() && self.checkPwd() && self.checkUsername())
{
self.submit.disabled=false;
}
else self.submit.disabled=true;
}
}//end of method
this.sendData=function()
{
var self=Form;
$.post('e.php',$('#myForm').serialize(),self.showR es);
self.startProc();
}//end odf sendData
this.startProc=function()
{
//this method is for after the data
//has been send to server this method will be called
document.body.style.backgroundColor='blue';
self.divProc=document.createElement('div');
self.divProc.innerHTML='Loading...';
self.divProc.style.width='100px';
self.divProc.style.height='100px';
self.divProc.style.fontSize='22px';
self.divProc.style.fontWeight='bold';
self.divProc.style.margin='auto';
document.body.appendChild(self.divProc);
}
this.stopProc=function()
{
//this method will be called when the result
//successfully came back from the server this method will
//end up showimg the proccessing to user
document.body.style.backgroundColor='#fff';
document.body.removeChild(self.divProc);
}
this.showRes=function(data)
{
var self=Form;
self.stopProc();
data=$.parseJSON(data);
self.output.innerHTML='username : '+data.username+'<br />password : '+data.pwd;
self.output.innerHTML+='<br />Email : '+data.email;
}//end of showRes
}//end of my singleton obj
window.onload=Form.init;
//]=]=>
</script>
</head>
<body>
<form id='myForm' action="">
<h3 style="color:#ccc">Register Form</h3>
<label>EMAIL : </label><input id ='email' name='email' value='' size='30' maxlength='100' /><br />
<label>USER NAME : </label><input id ='user' name='username' value='' size='30' maxlength='50' /><br />
<label>PASSWORD :</label><input id ='pwd' name='pwd' value='' size='30' maxlength='50' /><br />
<input id ='sub' type='button' name='submit' value='submit' id='submit' />
</form>
<div id='output'></div>
</body>
</html>