HTML+JS = 网站注册界面源代码
本注册页面未设置编码方式和兼容性，已测试，在Chrome浏览器显示正常
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<style>
.pg_header{
position: fixed;
height: 48px;
top: 0;
left: 0;
right: 0;
background-color: #2459a2;
line-height: 48px;
}
.pg_header .logo{
margin: 0 auto;
float: left;
width: 200px;
text-align: center;
line-height: 48px;
font-size: 28px;
color: white;
}
.pg_dl{
left: 400px;
display: inline-block;
padding: 0 40px;
color: white;
}
.pg_header .pg_dl:hover{
background-color: #2459fb;
cursor: pointer;
}
.left{
margin-top: 20px;
width: 400px;
display: inline-block;
float: left;
}
.pg_body{
margin-top: 50px;
font-size: 18px;
display: inline-block;
width: 200px;
}
.pg_body .menu{
width: 800px;
padding: 15px;
float: left;
font-weight: bold;
}
input[type="text"]{
width: 200px;
height: 25px;
border-radius: 6px;
}
input[type="password"]{
width: 200px;
height: 25px;
border-radius: 6px;
}
input[type="button"]{
background-color: #555555;
border: none;
color: white;
padding: 12px 29px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
input[type="submit"]{
background-color: #555555;
border: none;
color: white;
padding: 12px 29px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
.kong{
margin-top: -54px;
margin-left: 200px;
float:left;
padding: 15px;
}
.img{
width: 50px;
height: 40px;
}
.can{
width: 1220px;
height: 40px;
line-height: 40px;
margin: 0 auto;
text-align: center;
display: inline-block;
}
.tian{
color: red;
float: right;
font-size: 12px;
margin-right: -120px;
margin-top: -25px;
}
</style>
</head>
<body id="i88" style="margin: 0">
<div class = "pg_header">
<a class = "logo">LOGO</a>
<a class="pg_dl" id="i77">注册</a>
</div>
<form name="tijiao" method="post" onsubmit="return check()" action="winford.top">
<div class="left"></div>
<div class="pg_body">
<div class="menu">用户名:</div>
<div class="kong">
<input id="text1" type="text" name="01" placeholder="请输入用户名" onblur="check()"><span id="div1" class="tian" style="margin-top: 4px">*(为必填)<span>
</div>
<div class="menu">真实姓名:</div>
<div class="kong">
<input id="i2" type="text" name="01">
</div>
<div class="menu">性别:</div>
<div class="kong" style="width:200px;">
男<input type="radio" name="gender" value="1">
女 <input type="radio" name="gender" value="2">
</div>
<div class="menu">密码:</div>
<div class="kong">
<input id="text2" type="password" name="02" onblur="check()">
<span id="div2" class="tian" style="margin-top: -25px">*(为必填)<span>
</div>
<div class="menu">确认密码:</div>
<div class="kong">
<input id="text3" type="password" name="01" onblur="check()">
<span id="div3" class="tian">*(为必填)<span>
</div>
<div class="menu">电话号码:</div>
<div class="kong">
<input id="i5" type="text" name="01">
</div>
<div class="menu">邮箱地址:</div>
<div class="kong">
<input id="text4" type="text" name="01" onblur="check()">
<span id="div4" class="tian">*(为必填)<span>
</div>
<div class="menu">头像上传: </div>
<div class="kong">
<input type="file" name="file" value="选择头像" accept="image/*">
</div>
<div class="menu">爱好:</div>
<div class="kong" style="width: 300px;">
撩妹 <input type="checkbox" name="favor">
写代码 <input type="checkbox" name="favor">
篮球 <input type="checkbox" name="favor">
足球 <input type="checkbox" name="favor">
</div>
<div class="menu">个人签名:</div>
<div class="kong">
<textarea name="meno" style="width: 280px;height: 40px;">
有点懒。。。。
</textarea>
</div>
</div>
<div class="can">
<input id="i111" type="submit" name="002" value="注 册">
<p style="width: 200px;display: inline-block;"></p>
<input id="i222" type="button" name="004" value="取 消"> </div>
</form>
<script type="text/javascript">
//刷新or取消
document.getElementById('i77').onclick = function(){
location.reload();
}
document.getElementById('i222').onclick = function(){
location.reload();
} //用户名验证
function checkname(){
var div = document.getElementById("div1");
div.innerHTML = "";
var name1 = document.tijiao.text1.value;
if (name1 == "") {
div.innerHTML = "用户名不能为空！";
document.tijiao.text1.focus();
return false;
}
if (name1.length < 4 || name1.length > 16) {
div.innerHTML = "长度4-16个字符";
document.tijiao.text1.select();
return false;
}
var charname1 = name1.toLowerCase();
for (var i = 0; i < name1.length; i++) {
var charname = charname1.charAt(i);
if (!(charname >= 0 && charname <= 9) && (!(charname >= 'a' && charname <= 'z')) && (charname != '_')) {
div.innerHTML = "用户名包含非法字符";
document.form1.text1.select();
return false;
}
}
return true;
} //密码验证
function checkpassword(){
var div = document.getElementById("div2");
div.innerHTML = "";
var password = document.tijiao.text2.value;
if (password == "") {
div.innerHTML = "密码不能为空";
document.tijao.text2.focus();
return false;
}
if (password.length < 4 || password.length > 16) {
div.innerHTML = "密码长度为4-16位";
document.tijiao.text2.select();
return false;
}
return true;
} function checkrepassword(){
var div = document.getElementById("div3");
div.innerHTML = "";
var password = document.tijiao.text2.value;
var repass = document.tijiao.text3.value;
if (repass == "") {
div.innerHTML = "密码不能为空";
document.tijiao.text3.focus();
return false;
}
if (password != repass) {
div.innerHTML = "密码不一致";
document.tijiao.text3.select();
return false;
}
return true;
}
//邮箱验证
function checkEmail(){
var div = document.getElementById("div4");
div.innerHTML = "";
var email = document.tijiao.text5.value;
var sw = email.indexOf("@", 0);
var sw1 = email.indexOf(".", 0);
var tt = sw1 - sw;
if (email.length == 0) {
div.innerHTML = "邮箱不能为空";
document.tijiao.text5.focus();
return false;
} if (email.indexOf("@", 0) == -1) {
div.innerHTML = "必须包含@符号";
document.tijiao.text5.select();
return false;
} if (email.indexOf(".", 0) == -1) {
div.innerHTML = "必须包含.符号";
document.tijiao.text5.select();
return false;
} if (tt == 1) {
div.innerHTML = "@和.不能一起";
document.tijiao.text5.select();
return false;
} if (sw > sw1) {
div.innerHTML = "@符号必须在.之前";
document.tijiao.text5.select();
return false;
}
else {
return true;
}
return ture;
} function check(){
if (checkname() && checkpassword() && checkrepassword() && checkEmail()) {
return true;
}
else {
return false;
}
}
</script>
</body>
</html>
HTML+JS = 网站注册界面源代码的更多相关文章
- Web前端-网站首页和注册界面的实现
首页用到的知识如下: 1.bootstrap框架 2.jQuerry实现页面定时弹出广告 注册界面用到的知识: 1.bootstrap框架 2.jQuerry实现省市联动操作 3.jQuerry实现表 ...
- Node.js~在linux上的部署~外网不能访问node.js网站的解决方法
这是上一篇node.js部署到linux上的后续文章,当我们安装完node.js之后,建立了sailsjs的网站,然后在外面电脑上无法访问这个网站,这个问题我们如何去解决? 解决思路: 查看linux ...
- 使用Boostrap框架写一个登录\注册界面
Bootstrap是一个Web前端开发框架,使用它提供的css.js文件可以简单.方便地美化HTML控件.一般情况下,对控件的美化需要我们自己编写css代码,并通过标签选择器.类选择器.ID选择器为指 ...
- JFinal Web开发学习(五)注册界面和后端验证
效果: 直接点击注册后 : 后端验证是可靠地,前端js验证是不可靠的.只需要在浏览器删除js验证代码即可突破js验证. 1.注册界面 在WebRoot下新建regist.jsp <%@ page ...
- JS判定注册表单的几个方式 及 Ajax进行用户名存在判定
最近感觉不赶紧把代码逻辑记一下梳理一下,再做的时候就容易进入"逻辑误区". 有个表单,简单点. <!DOCTYPE html> <!-- 注册表单验证,用户名格式 ...
- 014——VUE中v-if语法在网站注册中的实际应用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- amazeui-datatables（登录注册界面用到）
amazeui-datatables(登录注册界面用到) 一.总结 amazeui-datatables:DataTables 插件 Amaze UI 集成,只修改了样式和默认显示语言,其他参数同官方 ...
- java注册界面及mysql连接
题目要求 完成注册界面及添加功能 1登录账号:要求由6到12位字母.数字.下划线组成,只有字母可以开头:(1分) 2登录密码:要求显示“• ”或“*”表示输入位数,密码要求八位以上字母.数字组成.(1 ...
- 使用AJAX实现用户名的唯一性校验（注册界面）-JAVA（新手）
(1)实现用户名的唯一性校验 所需要准备的: Servlet 注册界面的JSP 接口和实现类 所需要的接口和实现类: 接口: /* * 用户注册 * 账号的唯一性校验,需要传参(username) * ...
随机推荐
- ASP.NET WebApi 中使用swagger 构建在线帮助文档
1 在Visual Studio 中创建一个Asp.NET WebApi 项目,项目名:Com.App.SysApi(本例创建的是 .net 4.5 框架程序) 2 打开Nuget 包管理软件,查 ...
- WPF引用ActiveX提示没有注册类或不是有效的Win32程序
VS2017开发WPF时,需要引用UKey组件读取插入的Ukey编号和密钥 该组件在网页端调用时使用ObjectId进行ActiveX注册即可,后来做成WPF客户端进行读取遇到该问题. 解决: 右键项 ...
- flask总结之session，websocket，上下文管理
1.关于session flask是带有session的,它加密后存储在用户浏览器的cookie中,可以通过app.seesion_interface源码查看 from flask import Fl ...
- 课时10.第一个HTML网页（掌握）
网页的固定格式 编写网页和写信一样都有一套规范和要求,这套规范和要求中规定了写信的固定格式 写信基本结构 亲爱的xx: 你好! 我.................. ...... 此致 敬礼! xx ...
- plsql中特殊字符的处理
--去除换行chr(10) update zhzl_address t set t.add_administration_num=replace(t.add_administration_num,ch ...
- JavaScript-比较运算符
一.概述 > 大于运算符 < 小于运算符 <= 小于或者等于运算符 >= 大于或者等于运算符 == 相等运算符 === 严格相等运算符 != 不相等运算符 !== 严格不相等运 ...
- python人工智能爬虫系列:怎么查看python版本_电脑计算机编程入门教程自学
首发于:python人工智能爬虫系列:怎么查看python版本_电脑计算机编程入门教程自学 http://jianma123.com/viewthread.aardio?threadid=431 本文 ...
- linux简单文件管理命令的使用
在linux系统中,命令的使用要方便于图形界面的使用,上一个博客介绍了如何使用PuTTy远程登录linux,当然,我使用的是本地登录(手动滑稽) 经过一星期课余时间的了解,大致了解了一些简单的文件管理 ...
- 关于document.write()加载JS等静态资源 和 异步async加载JS
现流行浏览器对于静态资源的预加载 传统的浏览器,对于静态资源加载,会阻塞 HTML 解析器的线程进行,无论内联还是外链. 例如: <script src="test1.js" ...
- spring-quartz 定时器 给targetMethod传递参数
今天在做一个项目的时候,要给一个定时器任务的执行方法传递参数,在网上找了一下资料,可以使用arguments参数: <bean id="subsidyJobDetail" ...