HTML用户注册界面的实现

最新推荐文章于 2024-04-15 23:06:05 发布

摘星辰_

最新推荐文章于 2024-04-15 23:06:05 发布

阅读量2.1w

点赞数 4

分类专栏： java

本文链接：https://blog.csdn.net/qq_34909297/article/details/68493810

版权

java 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

该代码实现用户注册信息

1.验证用户名是否合法

2.验证密码是否符合规则

3.验证两次输入密码是否一致

4.如果以上都通过，提交该表单

实现后界面图

代码下载

代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/regist.css" rel="stylesheet" type="text/css">
<title>网上购物系统</title>
<script type="text/javascript">
var reg=/^[a-zA-Z]\w*$/;
var flag1=false,flag2=false,flag3=false;
function chang1(obj){
	var name=obj.value;
	if(name.length<3||name.length>8){
		//alert("密码要求3-8位！");
		document.getElementById("usName").innerHTML="<font color='red'> 用户名要求3-8位！</font>";
	}
	else if(!reg.test(name)){
		//alert("用户名由字母开头，后字母、数字或下划线!");
		document.getElementById("usName").innerHTML="<font color='red'> 用户名由字母开头，后字母、数字或下划线</font>";
		flag1=false;
	}
	else{
		flag1=true;
		document.getElementById("usName").innerHTML="<font color='green'>可以使用</font>";
	}
}
function chang2(obj){
	var pwd=obj.value;
	if(pwd.length<6||pwd.length>8){
		//alert("密码要求3-8位！");
		document.getElementById("ps1").innerHTML="<font color='red'>密码要求3-8位！</font>";
	flag2=false;
	}
	else{
		document.getElementById("ps1").innerHTML="<font color='green'>可以使用</font>";
		flag2=true;
	}
}
function chang3(obj){
	var pwd1=obj.value;
	var pwd=document.regist.password.value;
	if(pwd1.length<6||pwd1.length>8){
		//alert("密码要求3-8位！");
		document.getElementById("ps2").innerHTML="<font color='red'>密码要求3-8位！</font>";
	}
	else if(pwd!=pwd1){
		//alert("两次输入密码不一致！");
		document.getElementById("ps2").innerHTML="<font color='red'>两次输入密码不一致！</font>";
	flag3=false;
	}
	else{
		document.getElementById("ps2").innerHTML="<font color='green'>可以使用</font>";
		flag3=true;
	}
}
function sub(){
	if(flag1&&flag2&&flag3){
		document.regist.submit();
	}
	else{
		alert("请填写注册信息");
	}
}
function res(){
	document.regist.username.value="";
	document.regist.password.value="";
	document.regist.passwordAgain.value="";
	document.getElementById("usName").innerHTML="";
	document.getElementById("ps1").innerHTML="";
	document.getElementById("ps2").innerHTML="";
}
</script>
</head>
<body>
<form method="POST" name="regist" action="RegistJsp.jsp">
<table style="height: 100%; width: 100%">
	<tr align="center" valign="middle">
		<td>
		<TABLE width="392" height="200" border=0 align="center" cellPadding=0
			cellSpacing=0
			style="background-image: url(./images/login_Page/logPage.jpg); height: 200; width: 392">
			<TBODY>
				<TR valign="middle" align="center">
					<TD colSpan=3 height=40 valign="middle" align="center"><font
						face="黑体" size="4px" color="#196ed1"
						style="padding-left: 20px; vertical-align: middle">用户注册</font></TD>
				</TR>
				<TR>
					<td width="80" height="20" class="login_td">   用户名：</td>
					<td width="120" height="20" class="login_td"><input
						type="text" name="username" value="" style="WIDTH: 110px"
						onChange="chang1(this)"></td>
					<td id="usName"></td>
				</tr>
				<tr>
					<td height="20" class="login_td">   密 码：</td>
					<td height="20" class="login_td"><input type="password"
						name="password" value="" style="WIDTH: 110px"
						onChange="chang2(this)"></td>
					<td id="ps1"></td>
				</tr>
				<tr>
					<td height="20" class="login_td">   确认密码：</td>
					<td height="20" class="login_td"><input type="password"
						name="passwordAgain" value="" style="WIDTH: 110px"
						onChange="chang3(this)"></td>
					<td id="ps2"></td>
				</tr>
				<tr>
					<td height="20" colspan="2" align="center">                    
					<button class="login_button" onClick=res();>重置</button>
					 
					<button class="login_button" onClick=sub();>提交</button>
					 </td>
					<td class="login_td" align="left" width=81><a href="Login.html">返回</a></td>

				</TR>
			</TBODY>
		</TABLE>
		</td>
	</tr>
</table>
        </form>
</body>
</html>