表单的学习（test1）

在此，仅仅列出js的代码。

/*测试版本1 已经实现基本的验证

 *需要完善的地方：1.账号的验证需要满足，使用户输入的账号满足aa@aa.aa的形式，这可能需要一点正则表达式的知识；
 *               2.密码的验证应该更加完善，可以提示用户输入的密码长度是长于要求还是短于要求；
 *               3.表单的布局存在问题，应该改变绝对定位的方法，增加代码的灵活性；
 *               4.给界面添加一定的css样式。
 */
//账号信息的检测
var email=document.getElementById('email');
var error1=document.getElementById('error1');
var error1Display=false;
email.onblur=function(){
var value=email.value;
var length=value.length;
var count=0;
if(!error1Display){
for(var i=0;i<length;i++){
if(value[i]=='@')count++;
}
if(count!=1||value[0]=='@'||value[length-1]=='@'){
error1.style.display='block';
error1Display=true;
}
}
else{
for(var i=0;i<length;i++){
if(value[i]=='@')count++;
}
if(count==1&&value[0]!='@'&&value[length-1]!='@'){
error1.style.display='none';
error1Display=false;
}
}
}
//第一个密码框的测试
var password1=document.getElementById('password1');
var error2=document.getElementById('error2');
var error2Display=false;
password1.onblur=function(){
value=password1.value;
length=value.length;
if(!error2Display){
if(length<6){
error2.style.display='block';
error2Display=true;
}
else if(length>16){
error2.style.display='block';
error2Display=true;
}
return;
}
else{
if(length>=6&&length<=16){
error2.style.display='none';
error2Display=false;
}
}
}
//第二个密码框的测试
var password2=document.getElementById('password2');
var error3=document.getElementById('error3');
var error3Display=false;
password2.onblur=function(){
value1=password1.value;
value2=password2.value;
length1=value1.length;
length2=value2.length;
if(!error3Display){
if(length1!=length2){
error3.style.display='block';
error3Display=true;
}
else{
for(var i=0;i<length1;i++){
if(value1[i]!=value2[i]){
error3.style.display='block';
error3Display=true;
        }
    }
}
}
else{
if(length1==length2){
for(var i=0;i<length1;i++){
if(value1[i]!=value2[i])
{break;}
} 
if((i==length1)&&(value1[length1-1]==value2[length1-1])){
error3.style.display='none';
error3Display=false;
}
}
}
}