各种常用注册页面表单验证

最新推荐文章于 2024-03-01 20:16:14 发布

商云

最新推荐文章于 2024-03-01 20:16:14 发布

阅读量3.7k

点赞数 1

分类专栏： JS系列

本文链接：https://blog.csdn.net/lenolong/article/details/8316724

版权

本文介绍了三种常见的注册页面表单验证方法。首先是原始的表单验证，需点击提交后验证，不使用正则表达式等。然后讨论了使用JQuery和AJAX的即时验证，特别强调了验证用户名是否已存在的功能。最后提供了相关的JavaScript代码示例，包括用户输入的各个字段检查，如姓名、登录名、密码、电子邮件和日期格式的验证。

摘要由CSDN通过智能技术生成

这里介绍的第一个是最原始的表单验证方式，即没有使用即时验证，需要点击提交按钮才进行验证，也没有使用正则表达式或者AJAX验证，也或者是JQuery的验证，不过这么多验证方式接着第一个后面都会写出来的

1、最原始的注册验证方式，需要通过点击提交按钮才验证

先上图

具体代码

    Html代码   
    
  
 <span style="font-size: medium;"><span style="font-size: large;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>无标题文档</title>  
 </head>  
   
 <body>  
 <div id="content">  
     <!--首页的中间部分-->  
 <SCRIPT language="javascript" type="text/javascript">  
 //checkUserName() && sNameCheck() && passCheck() && bdaycheck() && genderCheck() && emailcheck() &&  
 function validateform(){  
     if(checkUserName() && sNameCheck() && passCheck()&& emailcheck() && bdaycheck() && genderCheck()  && agree( ))   
        return true;  
      else  
        return false;  
        
       
 }  
  //validate Name  
 function checkUserName(){    
 var fname = document.userfrm.fname.value;  
 var lname = document.userfrm.lname.value;  
 // validate first Name  
 if(fname.length != 0){  
     for(i=0;i<fname.length;i++){  
     var ftext = fname.substring(i,i+1);  
         if(ftext < 9 || ftext > 0){  
             alert("名字中包含数字 \n"+"请删除名字中的数字和特殊字符");  
             document.userfrm.fname.focus();  
             document.userfrm.fname.select();  
             return false  
         }  
     }  
 }  
 else{  
     alert("请输入“名字”文本框");  
     document.userfrm.fname.focus();  
     return false  
 }  
 // Validate last name  
 if(fname.length != 0){  
     for(i=0;i<fname.length;i++){  
     var ftext = fname.substring(i,i+1);  
         if(ftext < 9 || ftext > 0){  
             alert("名字中包含数字 \n"+"请删除名字中的数字和特殊字符");  
             document.userfrm.fname.focus();  
             document.userfrm.fname.select();  
             return false  
         }  
     }  
 }  
 else{  
     alert("请输入“名字”文本框");  
     document.userfrm.fname.focus();  
     return false  
 }  
 // Validate last name  
 if(lname.length != 0){  
     for(j=0;j<lname.length;j++){  
     var ltext = lname.substring(j,j+1);  
         if(ltext < 9 || ltext > 0){  
             alert("姓氏中包含数字 \n"+"请删除姓氏中的数字和特殊字符");  
             document.userfrm.lname.focus();  
             document.userfrm.lname.select();  
             return false  
         }  
     }  
 }  
 else{  
     alert("“姓氏”文本框为空");  
     document.userfrm.lname.focus();  
     return false;  
     }  
 return true;  
 }   
 // Login Name Validation  
 function sNameCheck(){  
 var sname = document.userfrm.sname.value;  
 var illegalChars = /\W/;  
     if(sname.length != 0){  
         if(illegalChars.test(sname)){  
         alert("登录名无效");  
         document.userfrm.sname.select();  
         return false;  
         }  
     }  
     else{  
     alert("是否忘记输入登录名？");  
     document.userfrm.sname.focus();  
     return false  
     }  
     return true;  
 }  
 //Validate password  
 function passCheck(){  
 var userpass = document.userfrm.pass.value;  
 var ruserpass = document.userfrm.rpass.value;  
 var illegalChars = /[\W_]/;// allow only charactors and numbers  
     // Check if Password field is blank.  
     if(userpass == "" || ruserpass == ""){  
         alert("未输入密码 \n" + "请输入密码");  
         document.userfrm.pass.focus();  
     return false;  
     }  
     // Check if password length is less than 6 charactor.  
     if(userpass.length < 6){  
         alert("密码必须多于或等于 6 个字符。\n");  
         document.userfrm.pass.focus();  
     return false;  
     }  
     //check if password contain illigal charactors.  
     else if(illegalChars.test(userpass)){  
         alert("密码包含非法字符");  
         document.userfrm.pass.select();  
         return false;  
     }  
       
     else if(userpass != ruserpass){  
         alert("密码不符");  
         document.userfrm.rpass.select();  
         return false;  
     }  
     return true;  
 }  
   
 // Email Validation  
 function emailcheck(){  
 var usermail = document.userfrm.email.value;  
   
     if(usermail.length == "0"){  
     alert("Email 文本框为空")  
     document.userfrm.email.focus();  
     return false;  
     }  
     if( usermail.indexOf("@") < 0 || usermail.indexOf(".") < 0 || usermail.indexOf("@") > usermail.indexOf(".")){  
       
       alert("Email 地址无效");  
       return false;  
     }  
     return true;  
 }  
   
 function bdaycheck(){  
 var bmonth = document.userfrm.bmon.value;  
 var bday = document.userfrm.bday.value;  
 var byear = document.userfrm.byear.value;  
 //alert(bmonth + "/" +  bday + "/" + byear);  
     if(bmonth == "" || bday == "" || byear == "" || bday=="dd" || byear == "yyyy"){  
         alert("请输入您的生日");  
         document.userfrm.bmon.focus();  
         return false;  
     }  
       
     for(i=0; i<bday.length; i++){  
     var bnum = bday.substring(i,i+1)  
         if(!(bnum < 9 || bnum > 0)){  
         alert("生日无效");  
         document.userfrm.bday.focus();  
         return false;  
         }  
     }  
   
     for(j=0; j<byear.length; j++){  
     var bynum = byear.substring(j,j+1)  
         if(!(bynum < 9 || bynum > 0)){  
         alert("生日无效");  
         document.userfrm.byear.focus();  
         return false;  
         }  
     }  
      //验证出生年月日是否在指定的范围内  
    if (byear<1900||byear>2120){    
         alert("您输入的出生年份超出范围！\n请重新输入！");  
         document.userfrm.byear.focus();  
         return(false);  
             }  
         else   
             if(bmonth<0||bmonth>12){  
              alert("您输入的月份超出范围！\n请重新输入！");  
              document.userfrm.bmon.focus();  
              return(false);  
             }  
             else   
                 if(bday<0||bday>31){  
                  alert("您输入的日期超出范围!\n请重新输入！");  
                  return(false);  
                 }  
               
          return true;  
 }  
 //check sex  
 function genderCheck(){  
 var usergen = document.userfrm.gen.length;  
     for(i=0;i<usergen;i++){  
         if(document.userfrm.gen[i].checked){  
         return true;  
         }  
         if (i==usergen-1){  
         alert("请选择性别");  
         return false;  
         }  
     }  
     return true;  
 }  
 function agree( )  
 {  
    if (document.userfrm.okradio[0].checked==false)  
    {  
       alert("您必须同意淘宝网的协议！才能加入会员");  
       return false;  
    }  
    else  
       return true;  
 }  
 </SCRIPT>  
   
 <TABLE width="950" border="0" align="center">  
   <TR>  
     <TD height="75"><h4>注册步骤： 1.填写信息　&gt;　 2.收电子邮件　&gt;　3.注册成功 </h4></TD>  
     </TR>  
 </TABLE>  
   
 <TABLE width="950" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#99CCFF">  
  <FORM name="userfrm" method="post" action="register_success.htm" onSubmit="return validateform( )">  
   <TR class="register_table_line">  
     <TD width="160" align="right" bgcolor="#E7FBFF">名字：</TD>  
     <TD width="507" align="left" bordercolor="#E7E3E7"><INPUT name="fname" type="text" class="register_textBroader"    
   
  id="fname" size="24"></TD>  
   </TR>  
   <TR class="register_table_line">  
     <TD width="160" align="right" bgcolor="#E7FBFF">姓氏：</TD>  
     <TD align="left" bordercolor="#E7E3E7"><INPUT name="lname" type="text" class="register_textBroader"  id="lname"   
   
 size="24"></TD