html+css

使用HTML和CSS做出如上图所示简约的界面，代码核心主要是整体布局的设定，以及输入input属性的一些设置，主要代码如下所示
CSS
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
<style>* {margin: 0;font-family: "微软雅黑";}h1{font-style:italic;}#title{width:400px;height:100px;position:absolute;left:10%;top:30%}#login_div {background-color: white;width: 370px;height: 350px;position: absolute;left: 70%;top: 20%;}#login_div .title {background-color: #7B797C;width: 100%;height: 50px;}#login_div .title1 {background-color: white;width: 50%;height: 100%;text-align: center;float: right;}#login_div .title2 {width: 50%;height: 100%;text-align: center;float: left;}#login_div .title p {font-weight: 100;font-size: 22px;text-align: center;line-height: 60px;}#login_div .inputs {margin: 0 auto;width: 85%;margin-top: 0px;height:200px;}#login_div .inputs input {width: 100%;height: 40px;margin: 3px;border-style: solid;border-width: 0.5px;border-color: #8B8B8B;text-indent: 10px;}#login_div .inputs #pass {opacity:0;filter:alpha(opacity=0);z-index:2;}#login_div .inputs #hint_pass {}.login_all a {text-decoration: none;color: white;line-height: 50px;}</style>

HTML
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
<body background="1.jpg">
<div><div id="title"><h1>登   录   页  面  制   作</h1></div>
<div id="login_div"><div class="title"><div class="title2"><a href="#" style="color: black;text-decoration: none;line-height: 60px; font-size: 15px;">注册</a></div><div class="title1"><a href="#" style="color: black;text-decoration: none;line-height: 60px; font-size: 15px;">登录</a></div></div><div class="inputs"><form id="longin" name="login" action="submit.html" method="get" onsubmit="return checkInput()">用户名 &nbsp&nbsp&nbsp：<input type="text" id="usernameID" name="username" placeholder="请输入中文用户名" onblur="checkUserName()" style="height:40px;width:150px"/><span id="usernameCheckID"></span> <br /><br />密码&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ：<input type="password" id="passwordID" name="password" placeholder="密码为6位，前两位为英文字母，后四位为数字" onblur="checkPassword()" style="height:40px;width:150px"/><span id="passwordCheckID"></span> <br /><br />手机号码 ：<input type="text" id="phoneID" name="phoneNumber" placeholder="请输入中国大陆手机号" onblur="checkPhoneNumber()" style="height:40px;width:150px"/><span id="phoneCheckId"></span><br /><br /><input type="submit" name="submit" style="background-color: aquamarine ;width:100px;height:30px;float:left"/><input type="reset" style="background-color: deepskyblue;width:100px;height:30px;float:right"/></form></div>
</div>
</div>

（代码不全希望自己能够做出来呀）

js

js部分主要是四个函数实现对于所输入的内容的验证，正则表达式的使用尤其重要。代码如下

// An highlighted block
<script>function checkUserName() {var username = document.getElementById("usernameID");var usernamecheck = document.getElementById("usernameCheckID");var usernameReg = /^[\u4e00-\u9fa5]+$/ig;
//          1.3 获取到username元素节点的value属性值var usernameValue = username.value;
//          1.4 判断value属性值是否匹配正则并进行相关处理if (usernameReg.test(usernameValue)) {usernamecheck.innerText = "正确";usernamecheck.style.color = "red";return true;} else {usernamecheck.innerText = "错误";usernamecheck.style.color = "yellow";return false;}}function checkPassword() {var password=document.getElementById("passwordID");var passwordvalue=password.value;var passwordcheck=document.getElementById("passwordCheckID");var passwordReg=new RegExp("^[0-9]{6}$","ig");if(passwordReg.test(passwordvalue)){passwordcheck.innerText="正确";passwordcheck.style.color="red";return true;}else{passwordcheck.innerText="错误";return false;}}function checkPhoneNumber(){var phonenumber=document.getElementById("phoneID");var phonenumbervalue=phonenumber.value;var phonenumebercheck=document.getElementById("phoneCheckId");var phonenumberReg=new RegExp("^[0-9]{11}$","ig");if(phonenumberReg.test(phonenumbervalue)) {phonenumebercheck.innerText = "正确"phonenumebercheck.style.color = "red";return true;}else{phonenumebercheck.innerText="错误";return false;}}function checkInput(){if(checkPhoneNumber()&&checkPassword()&&checkUserName()){alert("注册成功")return true;}else{alert("失败")return false;}}</script>

分别检测是否输入的格式正确；
正则表达式的应用可以参考如下网站
网页链接
新人第一次发，如有不对希望帮我指正，谢谢!
.

html+css+js实现注册页面相关推荐

html css实现登录注册页面,基于HTML5+css+JS_的精美登陆注册界面
[实例简介] 基于HTML5+css+JS的精美登陆注册界面------------------------------- [实例截图] [核心代码] login4 ├── index.html ├─ ...
css案例，注册页面_基础案例
注册页面案例(css) <!DOCTYPE html> <html lang="ch"> <head><meta charset=&quo ...
html+css+js实现登录页面
登录页面上一篇为注册页面,本次为登录页面,思路相同,将全局变量作为数据库进行验证登陆,话不多说直接上代码,可直接运行 <!DOCTYPE html> <html > < ...
使用js完成注册页面验证-注册有返回值的onsubmit事件函数
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>注册页 ...
【HTML、CSS、JS】注册页面实现（带验证码，密码强度验证，表格提交验证等）
由于是个刚学这方面的菜鸡,所以好多代码都是从各个大佬那儿粘贴复制过来的orz,边搬运边学习吧可以说是.以下为部分参考.图片字体我都在网上找的,没有商用应该不犯法吧quq 密码强度检测:https:// ...
JavaWeb,利用HTML和CSS蛋糕商城注册页面实现------JAVA,JavaWeb入门基础教程
主页 <html><head><meta charset="UTF-8"></head><frameset rows=&quo ...
JS完成注册页面的省市联动（JS内置对象全局函数，select标签操作）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
用html和css设计QQ注册页面,html和css制作QQ企鹅教程
我们知道CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式.CSS在Web设计领域是一个突破.利用它可以实现修改一个小的样式更新与之相关的所有页面元素.大家在学习前端编程的时候肯定会 ...
HTML+CSS实现静态注册页面
最终效果实现代码 <!DOCTYPE html> <html> <head><title>注册页</title><style typ ...
html+css 用户登录注册页面设计
1.服务器地址 <form action="服务器地址"> <!-所有的内容都写在这里面--> <form> 2.表单框(可有可无) <f ...

html+css+js实现注册页面

注册页面

html+css

js

html+css+js实现注册页面相关推荐

最新文章

热门文章