<!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
共 40 条
- 1
资源评论
昔柯的修炼日记
- 粉丝: 328
- 资源: 7
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功