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数据库之慢查询
一.简介 开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能. 二.参数说明 slow_query_log 慢查询开启状态 slow_ ...
- spring boot 程序启动缓慢的问题(二)
今天发现一台服务器上的springboot程序启动特别慢,完全启动起来用了有好几分钟.刚开始以为是代码写的有问题造成了卡死,直到看到这条log: 2017-03-08 10:06:49.600 INF ...
- bloginfo()用法小结|wordpress函数
bloginfo()显示关于您的wordpress站点的信息,主要是从您的用户配置文件和WordPress管理屏幕的一般设置中收集的信息.它可以在模板文件的任何地方使用.这总是将结果打印到浏览器.如果 ...
- 知识点5 C++保存txt文件
简单示例 #include <windows.h> #include <fstream> #include <iostream> #include <stri ...
- 用纯真ip数据库.dat文件查询ip归属
网址:http://www.cz88.net/ 下载安装后,有这个文件: 安装路径/ip/qqwry.dat 创建实例的时候吧这个文件路径传入,即可调用. /** * 从纯真IP地址库查询ip归属 * ...
- IDEA中各种图标
前言 在用这个开发工具之前对大量的图标先有所了解,会提高不少效率 首先讲下基本的图标 Java类 Java抽象类 Groovy类 注解类 枚举类 异常类 最终的类 接口 包含有main方法的可 ...
- ESA2GJK1DH1K基础篇: STM32+Wi-Fi(AT指令版)实现MQTT源码讲解
前言 注: 本程序发送心跳包,发送温湿度,返回控制数据这三个发送是单独的,有可能凑到一起发. 由于本身程序就是复杂性的程序,所以这节程序没有使用中断发送,没有使用环形队列发送,为了避免多条消息可能凑到 ...
- 待办事项App 评测
1. 敬业签 2. Microsoft To-Do(奇妙清单) 3. Evernote 4.one note 5.Google Keep 6.to-do-ist 7.365 日历 8.Any.Do 9 ...
- Linux搭建简单的http文件服务器
为了让自动化脚本可以通过wget来下载安装包,需要在集群中的某个节点部署一个http文件服务器 在Ubuntu中通过apt-get install apache2 安装apache2CentOS7中通 ...
- R地图包 maps
安装 maps install.packages(“maps”) 使用 maps library("maps") nz <- map_data("nz")