js表单验证的结构布局

在html中，为了避免表单对不齐的情况，首先可以将表单装入表格中（可以在css中消除表格边框）。

通行证用户名：	@163.com
登录密码：
重复登录密码：
保密邮箱：

下面是脚本： function usernameFO(){ var flag=false; var username=document.getElementsByName("username")[0].value; if(username==''){ username_msg.innerHTML=" 通行证用户名不能为空，请输入通行证用户名"; }else{ username_msg.innerHTML=" "; flag=true; } return flag; } function passwordFO(){ var flag=false; var passwordc=document.getElementsByName("password")[0].value; if(passwordc==''){ password_msg.innerHTML=" 密码不能为空，请输入密码"; }else{ password_msg.innerHTML=" "; flag=true; } return flag; } function repasswordFO(){ var flag=false; var repassword=document.getElementsByName("repassword")[0].value; if(repassword==''){ repassword_msg.innerHTML=" 重复密码不能为空，请重复输入密码"; }else{ var passwordc=document.getElementsByName("password")[0].value; if(passwordc==repassword){ repassword_msg.innerHTML=" "; flag=true; }else{ repassword_msg.innerHTML=" 密码不一致"; } } return flag; }

输入信息后，再通过正则表达式进行验证，下面以邮箱为例：
function emailFO(){
var regxp=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
var flag=false;
var email=document.getElementsByName(“email”)[0].value;
if(email==’’){
email_msg.innerHTML=“保密邮箱不能为空，请输入保密邮箱”;
}else{
if(regxp.test(email)){//匹配的上就是true
email_msg.innerHTML="";
flag=true;
}else{
email_msg.innerHTML=“邮箱格式错误”;
}
}
return flag;
}

提交表单时，可以再统一验证一次：
function check(){
var flagAll=true;
if(!usernameFO()){
flagAll=false;
}
if(!passwordFO()){
flagAll=false;
}
if(!repasswordFO()){
flagAll=false;
}
if(!emailFO()){
flagAll=false;
}
return flagAll;
}

总体思路：

先做好总体布局——表单，表单样式。
然后完善脚本，每一行的信息首先要不为空，然后通过正则表达式进行验证。
最后表单提交时应该再次全部验证，结果为true时才能允许提交。