JSP中简单的注册界面

今天在写一个注册界面的时候发现用户在输入用户名、密码、邮箱等内容时需要我们在前端进行简单的验证，当输入信息不满足我们的要求是我们应该禁止用户注册，网上查阅了一些信息再加上一些自己的理解写下了这个JSP网页，当然代码量很多，也不是很美观，有很多需要完善的地方，希望在接下来的日子里我能够将这个注册界面完成的更好。下面是我的JSP代码。

title>注册</title>
</head> 
<body>
	<h1>用户注册</h1>
	<form action="${pageContext.request.contextPath }/user/regist.do" method="post">
		用户名：<input type="text" id="username" name="uname" placeholder="请输入用户名" class="form-username" onchange="user()" /><br/>
		<div id="b1"><font size='2' color='#888888'></font></div>
		
		密码：<input type="password" id="password1" name="password" placeholder="请输入密码" class="form-password" onchange="demo()" /><br/>
		<div id="b2"><font size='2' color='#888888'></font></div>
		
		确认密码：<input type="password" id="password2" name="passwordAgain" placeholder="请确认密码" class="form-passwordAgain" onchange="mima()" /><br/>
		<div id="b3"><font size='2' color='#888888'></font></div>
		
		邮箱：<input type="text" id="email" name="email" placeholder="请输入邮箱" class="form-email" onchange="email1()" value="" /><br/>
		<div id="b4"><font size='2' color='#888888'></font></div>
		
		验证码：<input type="text" id="captcha" placeholder="请输入验证码" class="form-email" /><br/>
		<div id="b5"><font size='2' color='#888888'></font></div>
		
		<input type="submit" id="btn" value="注册" onclick="btnBill"> <input type="reset" value="重新输入">
	</form>
	
	<script>
		var stamp = document.getElementById("btn");
		//验证用户名
		function user(){
			var name=document.getElementById("username").value;
			if(name.length < 6){
				document.getElementById("b1").innerHTML="<font size='2' color='red'>用户名长度不够";
			}else{
				document.getElementById("b1").innerHTML="<font size='4' color='lime'>√";
			}
		}
		
		//验证密码
		function demo(){
			var name = document.getElementById("password1").value;
			if(name.length < 6){
				document.getElementById("b2").innerHTML="<font size='2' color='red'>密码长度不够";
			}else{
				document.getElementById("b2").innerHTML="<font size='4' color='lime'>√";
			}
		}
		
		
		//验证确认密码
		function mima(){
			var password=document.getElementById("password1").value;
			var  passwordAgain=document.getElementById("password2").value;
			if(password == passwordAgain){
				document.getElementById("b3").innerHTML="<font size='4' color='lime'>√";
				stamp.disabled=false;;
			}else{
				document.getElementById("b3").innerHTML="<font size='2' color='red'>两次密码不一致";
				stamp.disabled=true;
			}	
		}
		
		//验证邮箱
		function email1(){
			var reg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
			var eml=document.getElementById("email");
			if(eml.value == ""){
				document.getElementById("b4").innerHTML="<font size='2' color='red'>邮箱不能为空";
				stamp.disabled=true;
			}else if(!reg.test(eml.value)){
				document.getElementById("b4").innerHTML="<font size='2' color='red'>邮箱不合法";
				stamp.disabled=true;
			}else{
				document.getElementById("b4").innerHTML="<font size='4' color='lime'>√";
				stamp.disabled=false;;
			}
		}
	</script>
</body>

当然，里面运用的正则表达式很简单，大家可以自行百度完善，能力有限，望见谅。

JSP中简单的注册界面

猜你喜欢