制作一个注册页面用户名不能为空并且（6-20位英文字母数字下划线）
密码 重复密码 6位以上英文字母数字下划线 密码和重复密码必须一致
身份证号：旧身份证号为15位数字
新身份证号为18位数字， 或17位数字，最末位为x或X
email正常的邮箱规则
用户注册：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TzhangRong</title>
<script>
function vali() {
var pws1 = document.getElementById("name");
var as = pws1.value;
var pws2 = new RegExp(/^\w{6,20}$/);
if (pws1 != null && pws2.test(as)) {
alert("名字格式正确");
} else {
alert("名字格式错误");
}
var pass = document.getElementById("pwd");
var reg = new RegExp(/^[a-zA-Z0-9_-]{6,16}$/);
var reg1 = pass.value;
if (reg.test(reg1)) {
alert("密码正确");
} else{
alert("密码错误");
return false;
}
var passAB=document.getElementById("pwd1");
var reg2=new RegExp(/^[a-zA-Z0-9_-]{6,16}$/);
var reg3=passAB.value;
if (reg1==reg3){
alert("密码验证成功");
}else{
alert("两次密码不一样");
}
var email=document.getElementById("email1");
var reg=new RegExp(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/);
var em=email.value;
if(reg.test(em)){
alert("邮箱正确");
}else{
alert("邮箱错误");
}
var id6=document.getElementById("zid");
var reg=new RegExp(/^\d{15}$|^(\d{18}|\d{17}[xX])$/);
var email2=id6.value;
if(reg.test(email2)){
alert("id正确");
}else{
alert("id错误");
}
alert("恭喜您注册成功");
}
function open_win() {
window.open("登录界面.html")
}
</script>
<style>
#table-a{
width: 400px;
height: 420px;
border: #ffd6d5 solid;
background-color: #ffe3e3;
position: relative;
left: 500px;
top: 70px;
}
#box{
position: absolute;
left: 90px;
top: 100px;
/*border: yellow solid;*/
font-size: 20px;
}
#tit{
position: absolute;
left: 120px;
top: 20px;
}
body{
background-image: url("timg.jpg");
background-size:100% ;
width:1024px ;
height:700px;
}
</style>
</head>
<body>
<div id="table-a">
<form id="from1" onsubmit="return vali()" method="get">
<div id="tit"><h2>用户注册</h2></div>
<div id="box">
用户名：<input type="text" id="name"><br>
密码：<input type="password" id="pwd"><br>
确认密码：<input type="password" id="pwd1"><br>
邮箱：<input type="text" id="email1"><br>
身份证号：<input type="text" id="zid"><br>
爱好：<input name="hobby" type="checkbox"value="1">吃吃
<input value="2"type="checkbox" name="hobby">喝喝<br>
<input type=button value="登录" onclick="open_win()" />
<input type="submit"/><br>
</div>
</div>
</tr>
</form>
</div>
</body>
</html>
登录界面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
/*background-image: url("u=1782042621,287065208&fm=26&gp=0.jpg");*/
background-color: #ffd6d5;
background-size:100% ;
width:1024px ;
height:700px;
}
#box{
width: 400px;
height: 450px;
border: #fceaff solid;
background-color: #fff6f6;
position: relative;
left: 500px;
top: 50px;
}
.d2{
position: absolute;
left: 90px;
top: 120px;
/*border: yellow solid;*/
font-size: 20px;
}
#d1{
top: 60px;
position: absolute;
left: 160px;
/*border:rebeccapurple solid;*/
}
#ti{
position: absolute;
left: 120px;
top: 80px;
}
#t{
position: absolute;
left: 10px;
top: 115px;
}
</style>
<script>
function de() {
var n=document.getElementById("name1");
var name1=n.value;
var reg=new RegExp(/^\w{6,20}$/);
if (n!=null&®.test(name1)){
alert("姓名正确");
}else {
alert("重新输入");
}
var n=document.getElementById("pwd");
var pass=n.value;
var reg1=new RegExp(/^[a-zA-Z0-9_-]{6,16}$/);
if (n!=null&®1.test(pass)){
alert("密码正确");
}else {
alert("密码错误");
}
if(name1==reg&®1==pass){
alert("登陆成功");
}
}
</script>
</head>
<body>
<div id="box">
<form id="table_1" onsubmit="return de()">
<div id="d1"> <h2 id="font1">欢迎登陆</h2></div>
<div class="d2">
<h5>姓名：<input type="text" width="500" height="30" id="name1"></h5>
<h5>密码：<input type="text"width="50" height="30" id="pwd"></h5>
<div id="ti"> <h2><input type="submit" value="登录" height="80" width="80"/></h2>
</div>
<div id="t"> <input type=button value="Open Window" onclick="open_win()" /> </div>
</div>
</form>
</div>
</body>
</html>
注册实现图：
登录实现：
