用JavaScript实现用户登录验证、注册信息格式检验（附代码）

最新推荐文章于 2024-05-09 04:51:13 发布

青定姑娘

最新推荐文章于 2024-05-09 04:51:13 发布

阅读量5.8k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 正则表达式验证码 html 登录注册

本文链接：https://blog.csdn.net/indigopurple/article/details/52914665

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

网页截图

注册

在刚才的登录界面点击注册按钮，就可以转到注册页面。

填写信息啦，我写写写。注意爱好可以多选，但是学业只能单选哦。

咦，怎么除了姓名全写错了？这个格式检验功能也太精确了吧！（自卖自夸中，大家不要理我）

哦哦，这次基本写对了。

(づ｡◕‿‿◕｡)づ宝宝想再写一次？点重写，帮你重新开始。

代码

login.html


    
    

    
    
登录
<script type="text/javascript">
var str;window.addEventListener ("load",Cha,false);
/*判断验证码是否正确*/
function Code(){
var scode=document.getElementById ("scode");
var code=document.getElementById ("code");if(code.value==""||code.value!=str){
scode.innerHTML="错误";
scode.style.backgroundColor="red";}else{scode.innerHTML="正确";
scode.style.backgroundColor="green";}}
/*判断验密码格式是否正确*/
function Password(){
var password=document. getElementById("password");
var spass=document.getElementById ("spanp");	if(password.value=="")
{spass.innerHTML="错误";
spass.style.backgroundColor="red";}else{spass.innerHTML="正确";
spass.style.backgroundColor="green";}
if(password.value.length<8||password.value.length>20){
spass.innerHTML="错误";
spass.style.backgroundColor="red";}else{spass.innerHTML="正确";
spass.style.backgroundColor="green";}}
/*判断用户名格式是否正确*/
function Name(){
var name=document.getElementById ("name");
var sname=document.getElementById ("spann");	if(name.value==""){
sname.innerHTML="错误";
sname.style.backgroundColor="red";}else{sname.innerHTML="正确";
sname.style.backgroundColor="green";}}
/*判断数据提交前数据的验证*/
function Check(){
var name=document.getElementById ("name");
var password=document. getElementById("password");
var sname=document.getElementById ("spann");
var spass=document.getElementById ("spanp");
var scode=document.getElementById ("scode");	var c=true;
var code=document.getElementById ("code");
if(code.value==""||code.value!=str){CHa();	c=false;
scode.innerHTML="错误";
scode.style.backgroundColor="red";}else{scode.innerHTML="正确";
scode.style.backgroundColor="green";}if(name.value==""){
sname.innerHTML="错误";
sname.style.backgroundColor="red";c=false;}else{
sname.innerHTML="正确";
sname.style.backgroundColor="green";}if(password.value==""){
spass.innerHTML="错误";
spass.style.backgroundColor="red";c=false;	}else{
spass.innerHTML="正确";
spass.style.backgroundColor="green";}if(password.value.length<8||password.value.length>20){
spass.innerHTML="错误";
spass.style.backgroundColor="red";c=false;}else{
spass.innerHTML="正确";
spass.style.backgroundColor="green";}return c;}
function register(){
window.location.href="register.html";}
/*产生验证码*/
function Cha(){
var a=new Array(10);var k=0;
for(k=0;k<10;k++){a[k]=k;}
var t1=Math.round (Math.random()*9);
	var t2=Math.round (Math.random()*9);
	var t3=Math.round (Math.random()*9);
	var t4=Math.round (Math.random()*9);
	var ss=new Array(4);
ss[0]=a[t1];ss[1]=a[t2];
ss[2]=a[t3];ss[3]=a[t4];
str=ss.join("");
var pain=document.getElementById ("canv");
var draw=pain.getContext("2d");
draw.clearRect(0,0,60,60);
draw.font="20px Times New Roman";
draw.fillText(str,pain.width/10,pain.height/1.5);	draw.stroke()
}</script>

    
    
     
     
    
    

    
      

     
       

    
      

    
    

     
     

      
      

       
       登录

       
       用户名:
       
       
       
       

       
       密 码:
       
       
       
       

       
       验证码

register.html


    
    

    
    
注册
<script type="text/javascript">
function Phone(){
var sphone=document.getElementById("sph");
var phone=document.getElementById("phone");
var ph=true;if(phone.value==""){
sphone.innerHTML="电话号码不能为空";
sphone.style.backgroundColor="red";	c=false;ph=false;	}
if(phone.value.length!=11){
sphone.innerHTML="电话号码必须是11位";
sphone.style.backgroundColor="red";	c=false;ph=false;	}
if(isNaN(phone.value)){
sphone.innerHTML="电话号码必须由数字组成";
sphone.style.backgroundColor="red";	c=false;ph=false;}if(ph){
sphone.innerHTML="格式正确";
sphone.style.backgroundColor="green";}}function Email(){
var email=document.getElementById ("email");
var semail=document.getElementById("se");var se=true;
if(String(email.value).indexOf("@")==-1||String(email.value).indexOf(".")==-1){
semail.innerHTML="格式不对";
semail.style.backgroundColor="red";	c=false;se=false;}else{
if((String(email.value).indexOf("@")+1)==(String(email.value).indexOf("."))||(String(email.value).indexOf("@")-1)==(String(email.value).indexOf("."))||(String(email.value).indexOf("@"))>(String(email.value).indexOf("."))){
semail.innerHTML="格式不对";
email.style.backgroundColor="red";c=false;se=false;}else{
var str=(String(email.value)). match("(.*?)(@)(.*)(\\.)(.*)");
var h3=str[3];var h4=str[4];
var h5=str[5];
if(h3=="qq"||h3=="163"||h3=="sina"||h3=="sohu"){if(h3=="qq"){
if(isNaN(str[1])){
semail.innerHTML="格式不对"; semail.style.backgroundColor="red";se=false;}else if(str[1]. length<5|| str[1].length>11){
semail.innerHTML="格式不对";
semail.style.backgroundColor="red";se=false;}}}else{
semail.innerHTML="格式不对";
semail.style.backgroundColor="red";se=false;}if(h5!="com"){
semail.innerHTML="格式不对";
semail.style.backgroundColor="red";se=false;}}}if(se){
semail.innerHTML="格式正确";
semail.style.backgroundColor="green";}}
function Confirm(){
var scon=document.getElementById ("sc");
var password=document. getElementById("passwd");
var confirmpass=document. getElementById("conpass");
var sc=true;
if(confirmpass.value!=""){
if(confirmpass.value!=password.value){
scon.innerHTML="密码不一致";
scon.style.backgroundColor="red";  sc=false;}}else{if(sp){
scon.innerHTML="密码不一致";    scon.style.backgroundColor="red";    c=false;sc=false;}else{sc=false;}}if(sc){scon.innerHTML="正确";
scon.style.backgroundColor="green";	}}
function Password(){
var password=document. getElementById("passwd");
var spass=document. getElementById("sp");var sp=true;
if(password.value==""){
spass.innerHTML="密码不能为空";
spass.style.backgroundColor="red";sp=false;}
if(password.value.length>20||password.value.length<8){
spass.innerHTML="密码长度在8~20之间";
spass.style.backgroundColor="red";sp=false;}if(sp){
spass.innerHTML="正确";
spass.style.backgroundColor="green";}}
function Name(){
var name=document. getElementById("name");
var sname=document. getElementById("sn");
if(name.value==""){
sname.innerHTML="用户名不能为空";
sname.style.backgroundColor="red";}else{
sname.innerHTML="正确";
sname.style.backgroundColor="green";}}function Check(){
var name=document. getElementById("name");
var password=document. getElementById("passwd");
var email=document. getElementById("email");
var phone=document. getElementById("phone");
var confirmpass=document. getElementById("conpass");
var sname=document. getElementById("sn");
var spass=document. getElementById("sp");
var semail=document. getElementById("se");
var scon=document. getElementById("sc");
var sphone=document. getElementById("sph");
var c=true;var sp=true;
var sn=true;var se=true;
var sc=true;var ph=true;
if(name.value==""){
sname.innerHTML="用户名不能为空";
sname.style.backgroundColor="red";c=false;	sn=false;}
if(password.value==""){
spass.innerHTML="密码不能为空";
spass.style.backgroundColor="red";c=false;	sp=false;}
if(password.value.length>20||password.value.length<8){
spass.innerHTML="密码长度在8~20之间";
spass.style.backgroundColor="red";c=false;sp=false;}if(phone.value==""){
sphone.innerHTML="电话号码不能为空";
sphone.style.backgroundColor="red";	c=false;ph=false;	}
if(phone.value.length!=11){
sphone.innerHTML="电话号码必须是11位";
sphone.style.backgroundColor="red";c=false;ph=false;}
if(isNaN(phone.value)){
sphone.innerHTML="电话号码必须由数字组成";
sphone.style.backgroundColor="red";c=false;ph=false;}
if(confirmpass.value!=""){
if(confirmpass.value!=password.value){
scon.innerHTML="密码不一致";  scon.style.backgroundColor="red"; c=false;sc=false;}}else{if(sp){
scon.innerHTML="密码不一致";
scon.style.backgroundColor="red";    c=false;sc=false;}else{sc=false;}}if(String(email.value).indexOf("@")==-1||String(email.value).indexOf(".")==-1){
semail.innerHTML="格式不对";
semail.style.backgroundColor="red";c=false;se=false;}else{
if((String(email.value).indexOf("@")+1)==(String(email.value).indexOf("."))||(String(email.value).indexOf("@")-1)==(String(email.value).indexOf("."))||(String(email.value).indexOf("@"))>(String(email.value).indexOf("."))){
semail.innerHTML="格式不对";	    semail.style.backgroundColor="red";c=false;se=false;}else{
var str=(String(email.value )).match("(.*?)(@)(.*)(\\.)(.*)");
var h3=str[3];var h4=str[4];
var h5=str[5];
if(h3=="qq"||h3=="163"||h3=="sina"||h3=="sohu"){if(h3=="qq"){
if(isNaN(str[1])){
semail.innerHTML="格式不对";          semail.style.backgroundColor="red";c=false;se=false;}else if (str[1].length<5||str[1].length>11){
semail.innerHTML="格式不对";
semail.style.backgroundColor="red";c=false;se=false;}}}else{
semail.innerHTML="格式不对";
semail.style.backgroundColor="red";c=false;se=false;}if(h5!="com"){	semail.innerHTML="格式不对";
semail.style.backgroundColor="red";c=false;se=false;}}}if(sn){
sname.innerHTML="格式正确";
sname.style.backgroundColor="green";}if(se){semail.innerHTML="格式正确";
semail.style.backgroundColor="green";}if(sc){
scon.innerHTML="密码一致";
scon.style.backgroundColor="green";	}if(sp){
spass.innerHTML="密码格式正确";spass.style.backgroundColor="green";}if(ph){
sphone.innerHTML="格式正确";
sphone.style.backgroundColor="green";}return c;}
function Display(e){
var node=document.getElementById ("basenews")
var s=String (document.getElementById("bases").value);
if(node.style.display=="block")	{
var st="+请填写基本信息";
document.getElementById("bases").innerHTML=st;node.style.display="none";}else{
var st="-请填写基本信息";
document.getElementById("bases").innerHTML=st;
		node.style.display="block";}}
function Display1(e){
var node=document.getElementById ("hobbynews");
var s=String (document.getElementById("hobbys").value);
if(node.style.display=="block"){
document.getElementById("hobbys").innerHTML="+请选择你的爱好";
node.style.display="none";}else{
document.getElementById("hobbys").innerHTML="-请选择你的爱好";
node.style.display="block";}}
function Display2(e){
var node=document.getElementById ("professionnew");
var s=String (document.getElementById("professions").value);
if(node.style.display=="block"){
var st="+请选择你的学业";
document.getElementById("professions").innerHTML=st;
node.style.display="none";}else{
var st="-请选择你的学业";
document.getElementById("professions").innerHTML=st;
node.style.display="block";}}
</script>


    
      

     
       

    
      

    
    
     
     

      
      请填写你的信息
      
      
       
       
        
        -请填写基本信息
        
         
         姓  名: 
          
          
         
 
         密  码: 
          
          
         
 
         确认密码: 
          
          
         
 
         邮  箱: 
          
          
         
 
         电  话: 
          
          
        
        
        


       
       
       
       

       
       

        
        +请选择你的爱好

        
         
         读 书 
          
         体 育 
          
         旅 游 
          
         吃食物 
          
        
       
       
       
       

        
        +请选择你的学业
        
         
         小学生 
          
         中学生 
          
         高中生 
          
         大学生

青定姑娘

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript实现用户登录验证、注册信息格式检验（附代码）

网页截图登录首先是登录页面。特别说明一下，如果真的要实现用户名和密码配对功能的话，要连接数据库做。因为这里我只是对JavaScript技术的学习，没有连接数据库，所以不论输入什么密码都会显示错误。验证码是利用随机函数生成的，验证码的验证就是正则表达式的应用了。点击小眼睛图标可以显示你输入的密码。点验证码图片还可以换一张新的验证码。这次验证码输入正确了。
复制链接

扫一扫