js实现弹窗注册

最新推荐文章于 2024-07-01 08:00:00 发布

hyty

最新推荐文章于 2024-07-01 08:00:00 发布

阅读量5.4k

点赞数 3

分类专栏： java

本文链接：https://blog.csdn.net/qq_38341596/article/details/82886286

版权

本文主要介绍了如何使用JavaScript实现弹窗注册功能，包括CSS隐藏弹窗块，验证用户名是否已注册，检查注册表单的提交，并展示隐藏的注册表单弹窗。

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

<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>

1.CSS隐藏弹窗块

<script language="javascript">
//显示用户注册页面
function Regopen(divID){
	getProvince();		//获取省和直辖市	
    var notClickDiv=document.getElementById("notClickDiv");	//获取id为notClickDiv的层
	 notClickDiv.style.display='block';						//设置层显示
	  document.getElementById("notClickDiv").style.width=document.body.clientWidth;
	  document.getElementById("notClickDiv").style.height=document.body.clientHeight;
	divID=document.getElementById(divID);	//根据传递的参数获取操作的对象
	divID.style.display='block';			//显示用户注册页面
	divID.style.left=(document.body.clientWidth-663)/2;		//设置页面的左边距
	divID.style.top=(document.body.clientHeight-441)/2;		//设置页面的顶边距
}
//隐藏用户注册页面
function Myclose(divID){
	document.getElementById(divID).style.display='none';	//隐藏用户注册页面
    //设置id为notClickDiv的层隐藏
	 document.getElementById("notClickDiv").style.display='none';	
}
</script>

2.验证用户名是否已注册

<script language="javascript">
var flag_user=true;		//记录用户是否合法
var flag_pwd=true;			//记录密码是否合法
var flag_repwd=true;		//确认密码是否通过
var flag_email=true;		//记录E-mail地址是否合法
var flag_question=true;	//记录密码提示问题是否输入
var flag_answer=true;		//记录提示问题答案是否输入
//验证用户名是否合法，并且未被注册
function checkUser(str){
	if(str==""){			//当用户名为空时
		document.getElementById("div_user").innerHTML="请输入用户名！";//设置提示文字
		document.getElementById("tr_user").style.display='block';	//显示提示信息
		flag_user=false;
	}else if(!checkeUser(str)){	//判断用户名是否符合要求
		document.getElementById("div_user").innerHTML="您输入的用户名不合法！";	//设置提示文字
		document.getElementById("tr_user").style.display='block';		//显示提示信息
		flag_user=false;
	}else{		//进行异步操作，判断用户名是否被注册
		var loader=new net.AjaxRequest("UserServlet?action=checkUser&username="+str+"&nocache="+new Date().getTime(),deal,onerror,"GET");
	}	
}
function deal(){
	result=this.req.responseText;								//获取返回的检测结果
	result=result.replace(/\s/g,"");								//去除Unicode空白符
	if(result=="1"){											//当用户名没有被注册
		document.getElementById("div_user").innerHTML="";		//清空提示文字
		document.getElementById("tr_user").style.display='none';		//隐藏提示信息显示行
		flag_user=true;		
	}else{												//当用户名已经被注册
		document.getElementById("div_user").innerHTML=result;		//设置提示文字
		document.getElementById("tr_user").style.display='block';		//显示提示信息
		flag_user=false;
	}
}

3.验证提交注册表单

//验证密码
function checkPwd(str){
	if(str==""){		//当密码为空时
		document.getElementById("div_pwd").innerHTML="请输入密码！";	//设置提示文字
		document.getElementById("tr_pwd").style.display='block';		//显示提示信息
		flag_pwd=false;
	}else if(!checkePwd(str)){		//当密码不合法时
		docu