web前端案例二：简单的注册页面(有表单验证)_register_bg.png图片下载-程序员宅基地
效果图
用到的图片
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
body{
background: url("../image/register_bg.png") no-repeat center;
}
*{
margin:0px;
border:0px;
box-sizing: border-box;
}
.rg_layout{
width: 900px;
height: 500px;
border: 10px solid #EEEEEE;
background: white;
margin: auto;
margin-top: 30px;
padding: 20px;
}
.rg_left{
float: left;
margin: 15px;
}
.rg_left > p:first-child{
color:#FFD026;
font-size: 20px;
}
.rg_left > p:last-child{
color:#A6A6A6;
font-size: 20px;
}
.rg_center{
width: 500px;
float: left;
}
.rg_right{
float: right;
margin:10px;
}
.rg_right > p:last-child{
font-size: 5px;
}
.rg_right p a {
color: pink;
}
.td_left{
text-align: right;
width: 100px;
height: 50px;
}
.shurukuang,#birthday,#register{
margin-left: 30px;
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
border-radius: 5px;
padding-left: 10px;
}
#register{
width: 150px;
}
#xingbie{
padding-left: 30px;
}
#jpg_code{
width: 90px;
height: 32px;
border-radius: 5px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
}
#bt_zhuce{
padding-left: 135px;
}
.error{
color: red;
font-size: 10px;
}
</style>
<script>
//给表单绑定onsubmit事件，监听器中判断每一个方法校验的结果
//定义一些方法分别校验各个表单项
window.onload = function(){
document.getElementById("form").onsubmit=function(){
var flag1=checkusername();
var flag2=checkpassword();
var flag3=checktel();
var flag4=checkemail();
var flag5=checkname();
return flag1&&flag2&&flag3&&flag4&&flag5;
}
//给用户名和密码框分别绑定离焦事件
document.getElementById("username").onblur = checkusername;
document.getElementById("password").onblur = checkpassword;
document.getElementById("email").onblur = checkemail;
document.getElementById("tel").onblur = checktel;
document.getElementById("name").onblur = checkname;
}
function checkpassword(){
let password = document.getElementById("password").value;
var reg_password=/^\w{6,12}$/;
var flag_password =reg_password.test(password);
var s_password = document.getElementById("s_password");
if(flag_password){
s_password.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
}else{
s_password.innerHTML="密码在6-12位之间";
}
return flag_password;
}
function checkusername(){
let username = document.getElementById("username").value;
var reg_username=/^\w{6,12}$/;
var flag_username =reg_username.test(username);
var s_username = document.getElementById("s_username");
if(flag_username){
s_username.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
}else{
s_username.innerHTML="用户名长度在6-12位";
}
return flag_username;
}
function checkemail(){
let email = document.getElementById("email").value;
var reg_email=/^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$/;
var flag_email =reg_email.test(email);
var s_email = document.getElementById("s_email");
if(flag_email){
s_email.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
}else{
s_email.innerHTML="邮箱格式有误";
}
return flag_email;
}
function checktel(){
let tel = document.getElementById("tel").value;
var reg_tel=/^\d{11}$/;
var flag_tel =reg_tel.test(tel);
var s_tel = document.getElementById("s_tel");
if(flag_tel){
s_tel.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
}else{
s_tel.innerHTML="手机号需要11位数字";
}
return flag_tel;
}
function checkname(){
let name = document.getElementById("name").value;
var reg_name=/^\w{6,12}$/;
var flag_name =reg_name.test(name);
var s_name = document.getElementById("s_name");
if(flag_name){
s_name.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
}else{
s_name.innerHTML="请填写6-12位字符";
}
return flag_name;
}
</script>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<form action="#" id="form" method="get">
<table>
<tr>
<td class="td_left">用户名</td>
<td><input type="text" class="shurukuang" id="username" placeholder="请输入用户名"> </td>
<td><span id="s_username" class="error"></span></td>
</tr>
<tr>
<td class="td_left">密码</td>
<td><input type="text" class="shurukuang" id="password" placeholder="请输入密码"> </td>
<td><span id="s_password" class="error"></span></td>
</tr>
<tr>
<td class="td_left">Email</td>
<td><input type="text" class="shurukuang" id="email" placeholder="请输入邮箱账号"> </td>
<td><span id="s_email" class="error"></span></td>
</tr>
<tr>
<td class="td_left">姓名</td>
<td><input type="text" class="shurukuang" id="name" placeholder="请输入真实姓名"> </td>
<td><span id="s_name" class="error"></span></td>
</tr>
<tr>
<td class="td_left">手机号</td>
<td><input type="text" class="shurukuang" id="tel" placeholder="请输入手机号"> </td>
<td><span id="s_tel" class="error"></span></td>
</tr>
<tr>
<td class="td_left">性别</td>
<td id="xingbie"><input type="radio" name="gender" id="male"> 男
<input type="radio" name="gender" id="female"> 女</td>
<td><span id="s_sex" class="error"></span></td></tr>
<tr>
<td class="td_left">出生日期</td>
<td><input type="date" id="birthday"> </td>
<td><span id="s_date" class="error"></span></td>
</tr>
<tr>
<td class="td_left">验证码</td>
<td><input type="text" id="register" width="100px" height="30px">
<img src="../image/verify_code.jpg" id="jpg_code"></td>
<td><span id="s_yanzheng" class="error"></span></td>
</tr>
<tr>
<td colspan="2" id="bt_zhuce"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</form>
</div>
<div class="rg_right">
<p>已有帐号？<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
遇到的问题
- 邮箱的正则表达式自以为写得没错，但还是出错
- 取id名有些混乱，导致后面编写有些困难
智能推荐
关于Python共存问题和ESP8266 SDK开发环境搭建及HelloWorld显示(使用安信可AiThinkerIDE_V1.5.2编程)_安信可ide1.5-程序员宅基地
文章浏览阅读317次。ESP8266开发环境搭建_安信可ide1.5
【Linux】进程_linux so 入口函数-程序员宅基地
文章浏览阅读527次。首先通过图右边的文件编译过程，生成 so 文件和可执行文件，放在硬盘上。下图左边的用户态的进程 A 执行 fork，创建进程 B，在进程 B 的处理逻辑中，执行 exec 系列系统调用。这个系统调用会通过 load_elf_binary 方法，将刚才生成的可执行文件，加载到进程 B 的内存中执行。_linux so 入口函数
大屏可视化之适配和布局_大屏还原ui适配宽度-程序员宅基地
文章浏览阅读5k次，点赞5次，收藏53次。前言在做可视化大屏的时候，我们首先要保证UI图的比例不变，例如16:9的UI图，但大屏的比例可能是2:1，很多时候大屏的比例往往很少能与UI图的比例一模一样的，这个时候我们就要利用公式换算来适配大屏。例如16:9的UI图：适配大屏当页面首次加载时，判断视口的宽高，如果视口的宽/高 > 16/9 则说明视口宽度比较设计图宽，实际的显示宽度应该等于视口的高度*16/9。如果视口的宽/高 < 16/9 则说明视口高度比设计图高，实际的显示宽度应该等于视口的宽度，显示高度应等_大屏还原ui适配宽度
centos7挖矿病毒(xmrig,javs)清理_xmrig miner怎么彻底清除-程序员宅基地
文章浏览阅读3.3k次。1. 查看计划任务ls /var/spool/cron删除异常任务其配置项。如果当前系统之前并未配置过计划任务，可以直接删除计划脚本目录即可：rm -rf /var/spool/cron/*2. 查看密钥认证文件删除木马创建的密钥认证文件，如果当前系统之前并未配置过密钥认证，可以直接清空认证存放目录：rm -rf /root/.ssh/*如果有配置过密钥认证，需要删除指定的黑客创建的认证文件即可。3. 修复 SSH 配置项一般默认脚本中进行修改的 PermitRootLogin、R._xmrig miner怎么彻底清除
产品经理如何与研发工程师相处？-- Julie Zhuo_研发是把想法变成现实的桥梁-程序员宅基地
文章浏览阅读358次。原作者：Julie Zhuo，前Facebook产品设计副总裁原文地址：https://medium.com/the-year-of-the-looking-glass/how-to-work-with-engineers-a3163ff1eced很久以前，我当过项目经理。之后，我成为了工程师。最近7年，我担任产品设计师。每天我都与这三个岗位的人一起工作。每天，我都能发现新的方式来理解这产品研发背后的三大支柱的职责、挑战和艺术。研发工程师是魔术师，他们只需要轻轻动几下手指调整像素，瞧，一个能运作的产_研发是把想法变成现实的桥梁
利用虚拟机实时迁移技术可以实现服务器的,VMware vMotion虚拟机的实时迁移技术概述...-程序员宅基地
文章浏览阅读3k次。vMotion可在主机之间迁移正在运行的虚拟机，因此进行计划内服务器维护时无需中断应用的使用。概览vSphere vMotion 能在实现零停机和服务连续可用的情况下将正在运行的虚拟机从一台物理服务器实时迁移到另一台物理服务器上，并且能够完全保证事务的完整性。 vMotion 是创建动态、自动化并自我优化的数据中心所需的关键促成技术。即时迁移正在运行的虚拟机轻松管理和安排实时迁移即时迁移正在运行的..._vmware 虚机 漫游 实时性
随便推点
c语言考试程序改错只要结果对吗,计算机等级考试二级Ｃ语言程序设计第17章上机指导.ppt...-程序员宅基地
文章浏览阅读338次。计算机等级考试二级Ｃ语言程序设计第17章上机指导第17章 上机指导 17.1 上机考试简介 上机考试包括三个部分：程序填空题、程序改错题和程序设计题。填空和改错部分如果有指定的结果输出文件时，只要运行结果正确即可得满分，如果运行结果有错误或无结果文件输出时，则上机考试系统将对其修改或填充部分进行检测，如果其内容全部正确，则也可以得满分，如果部分正确，则按比例进行给分。而程序编制、调试运行类..._计算机二级c语言改错如果运行结果正确
java netty html,Netty框架的理解和简单使用-程序员宅基地
文章浏览阅读93次。Netty是什么Netty是一个高性能的异步的，基于事件驱动的NIO框架，它是JBOSS提供的一个开源框架，用以快速开发高性能，高可靠性的网络服务器和客户端程序。netty的架构 Netty官网https://netty.io/index.html 这里可以找到jar包或者maven依赖类似框架Apache 的 Minajava和nettyJava使用netty，建议jdk版本为1.5以后的，这是..._netty-codec-4.1.33.final.jar作用
Dubbo框架、用户注册、单点登录系统、用户登出、购物车系统、设置拦截器，实现用户权限校验、ThreadLocal、订单系统模块_dubbo登录登出-程序员宅基地
文章浏览阅读1.2k次。1、Dubbo框架2、重构京淘项目：JT-WEB/JT-SSO3、用户注册4、单点登录系统5、用户登出/完成用户数据6、封装cookie工具7、实现商品信息远程调用8、购物模块：jt-cart，CRUD操作_dubbo登录登出
php跨域问题怎么解决办法,跨域问题的解决方案 php-程序员宅基地
文章浏览阅读107次。本文通过设置Access-Control-Allow-Origin来实现跨域。例如：客户端的域名是client.runoob.com，而请求的域名是server.runoob.com。如果直接使用ajax访问，会有以下错误：1 XMLHttpRequest cannot load http://server.runoob.com/server.php. No ‘Access-Control-All..._php火狐跨域问题
《C语言程序设计》第五版谭浩强课后答案 第九章《用户自己建立数据类型》习题答案 （大一大二、考研、计算机二级必看）_c程序设计第五版谭浩强课后答案第九章-程序员宅基地
文章浏览阅读3k次，点赞7次，收藏29次。第九章《用户自己建立数据类型》习题答案 1.定义一个结构体变量(包括年、月、日)。计算该日在本年中是第几天,注意闰年问题。2.写一个函数days,实现第1 题的计算。由主函数将年、月、日传递给days函数,计算后将日子数传回主函数输出。3.编写一个函数print,打印一个学生的成绩数组，该数组中有5个学生的数据记录，每个记录包括num,name,score[3],用主函数输人这些记录,用print函数输出这些记录。4.在第3题的基础上,编写一个函数input,用来输人5个学生的数据记录。5.有10个学生,_c程序设计第五版谭浩强课后答案第九章
安装mysql6.3步骤_Mac下安装mysql5.7.18的详细步骤-程序员宅基地
文章浏览阅读65次。一、工具我们需要现在两个工具:MySQL 服务器(mysql-5.7.18)、MySQL GUI(mysql-workbench)MySQL 服务器包含了MySQL 的整个运行环境，安装了它就能通过命令行让 MySQL 运行的很好了。当然如果你不喜欢命令行，可以下载一个 GUI工具来管理 MySQL。GUI的功能很丰富，包括权限设置，创建数据库、创建表格等等。二、安装1.MySQL 服务器下载地址..._mysql workbench 6.3安装