<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<script>
//校验名字
function checkUsername(){
//定义正则字符规则
var usernameReg = /^[a-zA-Z0-9]{5}$/
//获取用户名
var username = document.getElementById("usernameInput").value
//获取提示框元素
var ts = document.getElementById("usernameInputSpan")
if(!usernameReg.test(username)){
ts.innerText = "请输入五位字母数字"
return false
}
ts.innerText = "OK"
return true
}
//校验密码
function checkUserPwd(){
//定义正则字符规则
var userPwdReg = /^[0-9]{6}$/
//获取密码元素
var userPwd = document.getElementById("userPwd").value
//获取提示框元素
var ts = document.getElementById("userPwdSpan")
if(!userPwdReg.test(userPwd)){
ts.innerText = "请输入六位数字"
return false
}
ts.innerText = "OK"
return true
}
//校验密码
function checkUserPwdCon(){
//获取密码元素
var userPwd = document.getElementById("userPwd").value
var userPwdCon = document.getElementById("userPwdCon").value
//获取提示框元素
var ts = document.getElementById("userPwdSpanCon")
if(userPwd!=userPwdCon){
ts.innerText = "密码不一致"
return false
}
ts.innerText = "OK"
return true
}
//表单在提交时，校验用户名和密码格式，格式OK才会提交
function checkForm(){
var result1 = checkUsername()
var result2 = checkUserPwd()
var result3 = checkUserPwdCon()
return result1&&result2&&result3
}
</script>
<style>
.tb{
border: 5px solid rgb(13, 154, 69);
margin: auto;
width: 300px;
border-radius: 3px;/*
border-color: green;
border-width: 3px; */
}
.ipt{
border: 0px ;
}
td{
border-color: rgb(4, 156, 4);
border-width: 1px;
border-style: solid;
}
.btn1{
background-color: antiquewhite;
font-family: 幼圆;
}
.btn2{
background-color: antiquewhite;
color: blue;
font-family: 幼圆;
}
.buttonC{text-align: center;}
#usernameInputSpan, #userPwdSpan, #userPwdSpanCon {
color: rgb(235, 84, 84);
font-size: xx-small;
}
</style>
</head>
<body>
<h2 style="color: #000;text-align: center; font-family: 'Courier New', Courier, monospace;">欢迎注册</h2>
<h3 style="color: #000;text-align: center; font-family: 'Courier New', Courier, monospace;">请注册</h3>
<form method="post" action=" login.html" onsubmit="return checkForm()">
<table class="tb" cellspacing="1px">
<tr class="ltr">
<td >请输入账号</td>
<td >
<input class="ipt" type="text" id="usernameInput" onblur="checkUsername()"/>
<span id="usernameInputSpan"></span>
</td>
</tr>
<tr class="ltr">
<td>请输入密码</td>
<td >
<input class="ipt" type="password" id="userPwd" onblur="checkUserPwd()" />
<span id="userPwdSpan"></span>
</td>
</tr>
<tr class="ltr">
<td>请确认密码</td>
<td >
<input class="ipt" type="password" id="userPwdCon" onblur="checkUserPwdCon()" />
<span id="userPwdSpanCon"></span>
</td>
</tr>
<tr class="ltr" style="margin: auto;">
<td colspan="3" class="buttonC">
<!-- <input class="btn1" type="submit" value="注册 " onclick=""> -->
<input class="btn1" type="reset" value="重置">
<button class="btn2"> <a href="login.html">注册</a></button>
</td>
</tr>
</table>
</form>
</body>
</html>
html.zip （40个子文件） 
html demo2-css 
03css引入方式3.html 1KB 04css选择器.html 3KB 06css定位.html 2KB 07css盒子模型.html 2KB 01css引入方式.html 2KB 02css引入方式2.html 2KB css 
btu.css 227B 05css浮动.html 1KB test regist.html 5KB login.html 4KB demo1-html 03有序无序列表.html 961B 08表单标签基本使用.html 2KB 02标题段落换行.html 899B 04超链接.html 1KB 05图片标签.html 968B 11特殊字符.html 577B img 34.jpeg 920KB
56.png 118KB
12.bmp 530KB 09welcome.html 231B 10布局标签.html 2KB 06表格标签.html 2KB 07表格跨行跨列.html 1KB demo3-js 08json格式.html 1KB 09js常用对象.html 359B js button.js 84B 13DOM编程API.html 5KB 14DOM编程api2.html 2KB 06js函数.html 1KB 15DOM编程api3.html 3KB 07js对象的创建.html 1KB 04js分支结构.html 1KB 11dom编程处理事件.html 2KB 01js引入方式.html 2KB 03js运算符.html 1KB 16js使用正则处理字符串.html 2KB 05js循环结构.html 910B 02js变量和数据类型.html 2KB 10js常见事件演示.html 4KB 12JSBOM编程常见API.HTML 4KB资源评论
