【内容:javascript案例-注册表单校验】
前面我们已经学过了正则，以下我们在对表单数据进行验证时，就会使用到正则表达式，并且会使用上面提到过的dom来显示一些错误信息。
需求:
1. 验证邮箱符合规则，并且不能为空
2. 验证会员名密码不能为空，并且保证长度至少6位
3. 重复密码要与密码一致.
分析:
1. 验证非空 /^\s*$/
2. 验证邮箱符合规则，正则表达式是: /^(\w)+@(\w)+(\.\w+)+$/
3. 验证会员名与密码长度至少6位 /^ (\w){6,}$/
4. 验证重复密码与密码一致，我们不需要使用正则，直接比较就可以。
扫描二维码关注公众号，回复：
464163 查看本文章
5. 对于上述操作，我们在使用时，可以使用javascript中提供的test方法完成。
6. 为了保证数据不正确情况下，表单不能提交，我们需要使用onsubmit，如果绑定的函数返回的是false,表单就不能被提交
实现:
<script type="text/javascript">
function checkForm(){
//1.获取数据
varemail=document.getElementById("email");
varusername=document.getElementById("username");
varpassword=document.getElementById("password");
varrepassword=document.getElementById("repassword");
//2..验证非空
if(checkNull(email.value)){
//如果返回true,代表email为空
document.getElementById("email_msg").innerHTML="<fontcolor='red'>邮箱不能为空</font>";
returnfalse;
}
if(checkNull(username.value)){
//如果返回true,代表email为空
document.getElementById("username_msg").innerHTML="<fontcolor='red'>会员名不能为空</font>";
returnfalse;
}
if(checkNull(password.value)){
//如果返回true,代表email为空
document.getElementById("password_msg").innerHTML="<fontcolor='red'>密码不能为空</font>";
return false;
}
if(checkNull(repassword.value)){
//如果返回true,代表email为空
document.getElementById("repassword_msg").innerHTML="<fontcolor='red'>重复密码不能为空</font>";
returnfalse;
}
//3.验证邮箱符合规则
if(!checkEmail(email.value)){
//如果返回true,代表符合规则
document.getElementById("email_msg").innerHTML="<fontcolor='red'>请输入有效的邮箱地址</font>";
returnfalse;
}
//4.验证会员名或密码长度大于6位
if(!checkLength(username.value)){
document.getElementById("username_msg").innerHTML="<fontcolor='red'>会员名长度必须大于6位</font>";
returnfalse;
}
if(!checkLength(password.value)){
document.getElementById("password_msg").innerHTML="<fontcolor='red'>会员名长度必须大于6位</font>";
returnfalse;
}
//5.验证两次输入密码一致
if(password.value!=repassword.value){
document.getElementById("repassword_msg").innerHTML="<fontcolor='red'>两次密码输入不一致</font>";
returnfalse;
}
returntrue;
}
//验证长度
functioncheckLength(data){
varreg=/^\w{6,}$/;
returnreg.test(data);
}
//验证邮箱
functioncheckEmail(data){
varreg=/^(\w)+@(\w)+(\.\w+)+$/;
returnreg.test(data);
}
//验证非空
functioncheckNull(data){
varreg=/^\s*$/; //0个或多个空字符串
return(reg.test(data))//如果data符合规则，返回true，否则返回false
}
</script>