<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户注册</title>
</head>
<style type="text/css">
form{
width:700px;
height:500px;
position:absolute;
left:50%;
top:50%;
margin-left: -200px;
margin-top: -250px;
}
span{
font-weight: bold;
color:#ff9955;
}
</style>
<body>
<form class="label" action="" method="post">
<table>
<tr><td>用户名:</td><td><input type="text" name="username" id="uname" onblur="checkUname()"><span id="unameSpan">(必填，3-15字符长度，支持汉字、字母、数字及_)</span></td></tr>
<tr><td>密码:</td><td><input type="text" name="password" id="pwd" onblur="checkPwd()"><span id="pwdSpan" >(必填，不得少于6位)</span></td></tr>
<tr><td>重复密码 :</td><td><input type="text" name="reusername" id="pwd2" onblur="checkPwd2()"><span id="pwd2Span" ></span></td></tr>
<tr><td>电子邮箱 :</td><td><input type="text" name="email"><span>(必填)</span></td></tr>
<tr><td><input type="submit" value="提交注册" onsubmit="return checkSub()"></td><td><a href="rlogin.php"><input type="button" value="返回" ></a></input></td></tr>
</table>
</form>
<script type="text/javascript">
function checkUname(){
//获取用户获得用户名信息
var uname=document.getElementById("uname").value;
//创建校验规则,用户名2-4个
var reg=/^[\u4e00-\u9fa5|\w+]{3,15}$/
//获取span对象
var unameSpan=document.getElementById("unameSpan");
//开始交验
if(unameSpan==""||unameSpan==null){
//输入校验结果
unameSpan.innerHTML="*用户名不能为空";
unameSpan.style.color="red";
return false;
}else if(reg.test(uname)){
//输入校验结果
unameSpan.innerHTML="*用户名通过";
unameSpan.style.color="green";
return true;
}else{
//输入校验结果
unameSpan.innerHTML="*用户名格式不符"
unameSpan.style.color="red";
return false;
}
}
//验证密码
function checkPwd(){
//获取用户获得用户名信息
var upwd=document.getElementById("pwd").value;
//创建校验规则,密码要求6-8位，首位为字母，后面5-7位是数字
var reg=/^\S{6,}$/;
//获取span对象
var span=document.getElementById("pwdSpan");
//开始交验
if(span==""||span==null){
//输入校验结果
span.innerHTML="*密码不能为空";
span.style.color="red";
return false;
}else if(reg.test(upwd)){
//输入校验结果
span.innerHTML="*密码通过";
span.style.color="green";
return true;
}else{
//输入校验结果
span.innerHTML="*密码格式不符"
span.style.color="red";
return false;
}
//第一次密码为a123456，第二次密码为a1234567，则修改的第一次密码，确认密码也会重新校验
checkPwd2();
}
function checkPwd2(){
//获取第一次校验密码
var pwd=document.getElementById("pwd").value;
//获取确认密码
var pwd2=document.getElementById("pwd2").value;
//获取span对象
var span=document.getElementById("pwd2Span");
//比较前两次密码是否相同
if( pwd2==""|| pwd2==null){
//输入校验结果
span.innerHTML="*密码不能为空";
span.style.color="red";
return false;
}else if(pwd===pwd2){
//输入校验结果
span.innerHTML="*密码通过";
span.style.color="green";
return true;
}else{
//输入校验结果
span.innerHTML="*密码不同，请重新输入"
span.style.color="red";
return false;
}
}
function checkSub(){
checkUname();
checkPwd();
checkPwd2();
/*checkmail();
checkPhone();
checkFav();
checkAddress();
checkCode();*/
return checkUname()&&checkPwd()&&checkPwd2();
}
</script>
</body>
</html>
浙公网安备 33010602011771号