注册界面:
要求:用户名只能是字母或者数字或者下划线,不能以数字开头,用户名长度在6到20之间
密码两次验证必须一致,用户名密码不能为空。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>模拟注册</title>
<style type="text/css">
*{margin:0;
padding:0;
font-size:14px;
font-famliy:"微软雅黑";
font-style:normal; }
body{background:#FBFBFB;}
.container{
border:solid 1px #F1F1F1;
width:400px;
height:400px;
background:#fff;
margin:20px auto;
padding-bottom:10px;
}
.container h1{
font-size:22px;
font-family:微软雅黑;
text-align:center;
color:#333;
display:block;
margin:20px;
border:0px solid gray;
}
.div1{
margin-left:25px;
}
#Name,#Pwd1,#Pwd2{
color:gray;
height:25px;
width:180px;
font-size:10px;
padding-left:5px;
margin-top:10px;
margin-right:40px;}
#btn{
height:25px;
width:60px;
display:block;
margin:10px auto;
}
#sex1,#sex2{
margin-left:10px;
margin-top:20px;
line-height:30px;
width:13px;
border:1px solid gray;
}
</style>
<script>
window.οnlοad= function(){
var name="";
Name.onkeyup = function(){
name = Name.value;
Name.value = name.replace(/黄色|黄|枪|炮/g,"");
}
btn.onclick = function(){
var pwd1 = Pwd1.value;
var pwd2 = Pwd2.value;
//用户名密码不能为空的判断
if(name == "" || pwd1 == "" || pwd2 == ""){
alert("用户名或者密码不能为空!");
}
//不能以数字开头
else if(name.charCodeAt(0) >= 48 && name.charCodeAt(0) <= 57){
alert("不能以数字开头!");
}
//用户名长度不能低于6位,高于20位
else if(name.length < 6 || name.length > 20){
alert("用户名长度不能低于6位,高于20位。");
}
//密码两次输入不一致的判断
else if(pwd1 != pwd2){
alert("两次密码输入不一致!请重新输入。");
Pwd1.value="";
Pwd2.value="";
}
//你输入的有不合法字符,只能以字母,数字下划线输入
//0--9:48--57 A-Z:65-90 a-z:97-122 -:95
for(var i = 0;i < name.length; i++ ){
if(name.charCodeAt(i) < 48 ||( name.charCodeAt(i) > 57&&
name.charCodeAt(i) < 65)||( name.charCodeAt(i) > 90 &&
name.charCodeAt(i) < 95)||( name.charCodeAt(i) > 95 &&
name.charCodeAt(i) < 97)|| name.charCodeAt(i) > 122 )
{
alert("你输入的有不合法字符,只能以字母,数字下划线输入!");
break;
}
}
}
}
</script>
</head>
<body>
<div class="container">
<h1>注册</h1>
<div class="div1">
用户名: <input type = "text" placeholder = "输入用户名" id = "Name"/><br/>
密码: <input type = "text" placeholder = "输入密码" id = "Pwd1"/><br/>
再次输入密码:<input type = "text" placeholder = "再次输入密码" id = "Pwd2"/>
性别:<input type="radio" name="sext" id="sex1"/> boy
<input type="radio" name="sext"id="sex2"/> girl
<input type="button" value="提交" id="btn"/>
</div>
</div>
</body>
</html>