今天在写一个注册界面的时候发现用户在输入用户名、密码、邮箱等内容时需要我们在前端进行简单的验证,当输入信息不满足我们的要求是我们应该禁止用户注册,网上查阅了一些信息再加上一些自己的理解写下了这个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>
当然,里面运用的正则表达式很简单,大家可以自行百度完善,能力有限,望见谅。