HTML+CSS+JS综合练习（动态验证版）
<!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>
HTML+CSS+JS综合练习（动态验证版）的更多相关文章
- 前端、HTML+CSS+JS编写规范（终极版）
HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式: HTML文档必须使用HTML5的标准文档格式: HTMLCSS编写规范 HTML和CSS的标签.属性.类名.ID都必须使用小写 ...
- js中动态载入css js样式
js中动态载入css样式,方法如下: //<link rel="stylesheet" type="text/css" href="http:/ ...
- js活jQuery实现动态添加、移除css/js文件
下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下 动态加载,移除,替换css/js文件 // 动态添加css文件 function ad ...
- 关于 ajax 动态返回数据 css 以及 js 失效问题(动态引入JS)
ajax 毕竟是异步的 所以动态加载出来的数据 难免遇到 css 或者 js 失效的问题,所以要动态加载 css ji等文件了 1.公共方法 load //动态加载 js /css function ...
- 文字添加响应事件，js动态加载CSS, js弹出DIV
文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- HTML/CSS/JS编码规范
最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...
- 前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- 【转】Maven Jetty 插件的问题（css/js等目录死锁）的解决
Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决: 1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty ...
- 表单验证:$tablePrefix（定义表前缀）;$trueTableName = 'yonghu',找到真实表名(yonghu)表;create($attr,0)两个参数;批量验证(返回数组);ajax+动态验证表单
*$tablePrefix是定义在Model中的,优先级大于配置文件中,如果项目中表前缀全部比如为"a_",并且在配置文件中定义了 'DB_PREFIX'=>'a_' 后期如 ...
随机推荐
- mysql 连接数用完，root也无法登陆的处理方法
gdb -p $(pidof mysqld) -ex "set max_connections=1500" -batch 使用 gdb 临时调大 参数 max_connection ...
- Netty实战入门详解——让你彻底记住什么是Netty（看不懂你来找我）
一.Netty 简介 Netty 是基于 Java NIO 的异步事件驱动的网络应用框架,使用 Netty 可以快速开发网络应用,Netty 提供了高层次的抽象来简化 TCP 和 UDP 服务器的编程 ...
- 子网掩码的作用与IP网段的划分
公有IP地址分类 A类:1.0.0.0 到 127.255.255.255主要分配 给大量主机而局域网网络数量较少的大型网络 B类:128.0.0.0 到191.255.255.255 一般用于国际性 ...
- java String、String.concat和StringBuilder性能对比
看到网上有人已经做过对比,并且贴出了代码,然后我运行了之后发现跟我分析的结论差距很大.发现他的代码有个问题,UUID.randomUUID() 首次调用耗时会很高,这个耗时被计算给了String,这对 ...
- Mac下搭建Appnium+Python+Ios模拟器环境
转载:https://www.jianshu.com/p/f7cf077d9444 https://blog.csdn.net/a158123/article/details/79684499 htt ...
- vector、ArryList、LinkedList的区别与联系
vector.ArryList.LinkedList的区别与联系 vectory类:底层 采用数组结构算法,使用了线程锁(synchronized),线程安全,但是性能相对ArryList比较低. A ...
- 决策单调性优化dp 专题练习
决策单调性优化dp 专题练习 优化方法总结 一.斜率优化 对于形如 \(dp[i]=dp[j]+(i-j)*(i-j)\)类型的转移方程,维护一个上凸包或者下凸包,找到切点快速求解 技法: 1.单调队 ...
- JNA 调用操作系统函数 和 系统调用
linux系统调用syscall 表:https://filippo.io/linux-syscall-table/ Linux Namespace 特性简要介绍 原文:https://iliangq ...
- JavaScript 一些实用技巧
快速创建从0到n的数字 let arr1 = [...(new Array(n)).keys()]; let arr2 = Array.from({length:n},(v, k) => k); ...
- Spring+Spring+Hibernate环境搭建
源码地址:https://gitee.com/kszsa/ssht.git 一.引入lib包 pom.xml,引入需要的jar包 <?xml version="1.0" en ...