HTML+CSS+JS综合练习（动态验证版）
2024-10-20 08:30:33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script> window.onclick = function () {
document.getElementById("form").onsubmit = function () {
return checkUsername() && checkPassword() && checkEmail();
}
document.getElementById("username").onblur = checkUsername; document.getElementById("password").onblur = checkPassword; document.getElementById("email").onblur = checkEmail; document.getElementById("name").onblur=checkName;
document.getElementById("tel").onblur=checkTel; } function checkUsername() {
var username = document.getElementById("username").value;
var reg = /^\w{6,12}$/;
var flag = reg.test(username);
var s_username = document.getElementById("s_username");
if (flag) {
s_username.innerHTML = "<img src='img/gou.png' width='35px' height='25px'>";
} else {
s_username.innerHTML = "用户名格式有误！";
}
} function checkPassword() {
var password = document.getElementById("password").value;
var s_password = document.getElementById("s_password");
var reg = /^\w{6,12}$/;
var flag = reg.test(password);
if (flag) {
s_password.innerHTML = "<img src='img/gou.png' width='35px' height='25px'>"; } else {
s_password.innerHTML = "密码格式有误！";
} } function checkEmail() {
var email = document.getElementById("email").value;
var s_email = document.getElementById("s_email");
var reg = /^\w{6,12}/;
var flag = reg.test(email);
if (flag) {
s_email.innerHTML = "<img src='img/gou.png' width='35px' height='25px'>"; } else {
s_email.innerHTML = "邮箱输入错误!";
}
} function checkName() {
var name = document.getElementById("name").value;
var s_name = document.getElementById("s_name");
var reg = /^\w{1,12}$/;
var flag = reg.test(name);
if (flag) {
s_name.innerHTML = "<img src='img/gou.png' width='35px' height='25px'>"; } else {
s_name.innerHTML = "名字输入有误！";
} } function checkTel() {
var tel = document.getElementById("tel").value;
var s_tel = document.getElementById("s_tel");
var reg = /^\w{6,12}$/;
var flag = reg.test(tel);
if(flag){
s_tel.innerHTML="<img src='img/gou.png' width='35px' height='25px'>"; }else{
s_tel.innerHTML= "邮箱输入有误！";
}
} </script> <style>
.error {
color: red;
} * {
margin: 0px;
padding: 0px;
box-sizing: border-box;
} body {
background: url("img/register_bg.png");
padding: 30px;
} .BigBox {
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
} /*<!--left_layout-->*/
.left_layout {
margin: 15px;
float: left;
} #txt_reg1 {
color: #FFD026;
font-size: 20px; } #txt_reg2 {
color: #A6A6A6;
font-size: 22px;
} /*<!--center_layout-->*/
.center_layout {
float: left;
margin: 15px;
} .center_layout table {
/*合并边框模型*/
border-collapse: separate;
/*相邻单元的边框之间的距离*/
border-spacing: 2px;
border-color: gray;
} .td_left {
width: 100px;
text-align: right;
height: 45px;
} .td_right {
padding-left: 50px;
} #username, #password, #email, #name, #tel, #birthday, #verify_code {
width: 250px;
height: 32px;
border: 1px solid #A6A6A6;
border-radius: 5px;
padding-left: 10px;
} #verify_code {
width: 110px;
} #img_verify_code {
height: 32px;
/*垂直居中*/
vertical-align: middle;
} #btn_submit {
width: 130px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
} /*<!--right_layout-->*/
.right_layout {
float: right;
margin: 15px;
} a:link {
color: pink;
} a:hover {
color: green;
} a:active {
color: yellow;
} a:visited {
color: red;
} .right_layout div {
float: left;
}
</style>
</head>
<body>
<div class="BigBox">
<!--left_layout-->
<div class="left_layout">
<div id="txt_reg1">新用户注册</div>
<div id="txt_reg2">USER REGISTER</div>
</div>
<!--center_layout-->
<div class="center_layout">
<!--定义表单 form-->
<form action="#" method="post" id="form">
<table>
<tbody>
<tr>
<td class="td_left">
<label for="username">用户名</label> </td>
<td class="td_right">
<input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="s_username" class="error"></span>
</td> </tr> <tr>
<td class="td_left">
<label for="password">密码</label>
</td>
<td class="td_right">
<input type="password" name="password" id="password" placeholder="请输入密码">
<span id="s_password" class="error"></span>
</td>
</tr> <tr>
<td class="td_left">
<label for="email">Email</label> </td>
<td class="td_right">
<input type="email" name="email" id="email" placeholder="请输入邮箱">
<span id="s_email" class="error"></span>
</td>
</tr> <tr>
<td class="td_left">
<label for="name">姓名</label>
</td>
<td class="td_right">
<input type="text" name="name" id="name" placeholder="请输入姓名">
<span id="s_name" class="error"></span>
</td>
</tr> <tr>
<td class="td_left">
<label for="tel">手机号</label>
</td>
<td class="td_right">
<input type="text" name="tel" id="tel" placeholder="请输入手机号">
<span id="s_tel" class="error"></span>
</td>
</tr> <tr>
<td class="td_left">
<label>性别</label>
</td>
<td class="td_right">
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr> <tr>
<td class="td_left">
<label for="birthday">出生日期</label>
</td>
<td class="td_right">
<input type="date" name="birthday" id="birthday">
</td>
</tr> <tr>
<td class="td_left">
<label for="verify_code">验证码</label>
<td class="td_right">
<input type="text" name="verify_code" id="verify_code">
<img src="img/verify_code.jpg" id="img_verify_code">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册" id="btn_submit">
</tr> </tbody>
</table>
</form>
</div>
<!--right_layout-->
<div class="right_layout">
<div>已有账号?</div>
<div><a href="#">立即登录</a></div> </div>
</div>
</body>
</html>
最新文章
- sql server 导出表结构到 word
- iOS socket 笔记
- Android -- 使用inBitmap要注意的地方
- centos安装与基本使用
- 第七篇、使用UIView的animateWithDuration方法制作简易动画
- oracle的sid
- Solr集成IK中文分词器
- firefox同步数据时无响应问题
- 超市买苹果.py
- open-falcon-agent插件使用
- HBase运维经验
- Canvas & SVG
- 关于REST API设计的文章整理
- Centos7 升级 Ruby
- Centos6与Centos7防火墙设置与端口开放的方法
- ubuntu关闭和开启防火墙
- jmeter—打开jmx报com.thoughtworks.xstream.converters.ConversionException
- AGC009D Uninity
- Google Admob广告Android全攻略1
- python抓取链家房源信息