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) * ...
随机推荐
- MVC学习十三：RouteDebugger插件应用
1.下载第三方程序集RouteDebugger https://files.cnblogs.com/files/WarBlog/RouteDebugger.rar 2.把RouteDebugger程序 ...
- phpstudy 出现You don't have permission to access / on this server.
You don't have permission to access / on this server. 去掉vhost文件中的Options FollowSymLinks ExecCGI 第一次发 ...
- 【转载】RETE算法研究
本文转自:http://www.ibm.com/developerworks/cn/opensource/os-drools/ RETE算法是大多数规则引擎采用的一种模式匹配算法,比如开源的Drool ...
- 【Linux资源管理】使用sar进行性能分析
sar可用于监控Linux系统性能,帮助我们分析性能瓶颈.sar工具的使用方式为”sar [选项] intervar [count]”,其中interval为统计信息采样时间,count为采样次数. ...
- MySql服务未知原因消失了的解决办法
一: 5.1及后续版本: 打开计算机命令窗口,切换至mysql安装目录,然后运行bin目录下的mysqld.exe,命令如下: D:\MySQL\bin>mysqld.exe -installS ...
- forEach for...in for...of
forEach orEach 方法为数组中含有有效值的每一项执行一次 callback 函数,那些已删除(使用 delete 方法等情况)或者从未赋值的项将被跳过(不包括那些值为 undefined ...
- H5输入框在输入信息的时候 页面会变形 并且在页面不变形的时候 键盘会遮挡 输入框的解决办法
$(document).ready(function () { $('body').css({'height':$(window).height()})});//这行是解决输入框在输入信息弹出键盘后页 ...
- CF1066CBooks Queries（数组的特殊处理）
题意描述 您需要维护一个数据结构,支持以下三种操作: L id:在现在序列的左边插一个编号为id的物品 R id:在现在序列的右边插一个编号为id的物品 ? id:查询该点左面有几个元素,右面有几个元 ...
- 关于Django中JsonResponse返回中文字典编码错误的解决方案
解决方案:JsonResponse(data, json_dumps_params={'ensure_ascii':False}) ! data是需要渲染的字典 def master(request) ...
- multiprocessing中进程池，线程池的使用
multiprocessing 多进程基本使用 示例代码1 import time import random from multiprocessing import Process def run( ...