注册界面演示代码（前端开发）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册</title><style>* {margin: 0px;padding: 0px;/*这样的设置会阻止元素大小的改变，因为设置内边距时元素大小会发生改变*/box-sizing: border-box;}body {background: url("image/bjt01.jpg") no-repeat center;background-size: cover;}.layout {/*background-image: url("image/bjt01.jpg");*//*background-size: cover;*/width: 900px;height: 500px;border: 8px solid #EFFBFB;background-color: white;margin: 110px auto auto auto;}.div-left {float: left;margin: 15px;}.div-center {float: left;}.div-right {float: right;margin-top: 20px;margin-right: 20px;}.div-left > p:first-child {color: #facb48;font-size: 20px;}.div-left > p:last-child {color: #ABADAF;font-size: 20px;}.div-right > p {font-size: 15px;}.div-right p a {color: pink;}.div-center {width: 520px;margin-top: 10px;}.td-left {width: 110px;text-align: right;height: 45px;}.td-right {padding-left: 20px;}#userName, #password, #email, #realName, #phoneNumber, #birthday, #verCode {width: 251px;height: 32px;border: 1px solid #E6EAED;padding-left: 10px;border-radius: 5px;/*输入框，参照td垂直居中*/vertical-align: middle;}#verCode {width: 120px;margin-right: 20px;}#img-check {vertical-align: middle;height: 32px;}#sub-btn {width: 150px;height: 40px;background-color: #facb48;border: 1px solid #facb48;}/*设置placeholder字的颜色*/input::-webkit-input-placeholder {/* WebKit browsers */color: #ccc;}.error {font-size: 15px;color: red;margin-left: 10px;}/*设置对钩图片垂直居中，宽度和高度*/.tick {vertical-align: middle;width: 25px;height: 25px;}/*显示线框*/.div-right, .div-center, .td-right, .td-left, .td-btn {/*border: 1px solid #BF562B;*/}#td-btn {padding-left: 130px;}#sub-btn {margin-top: 20px;}</style><script !src="">/*** 分析：* 1.给表单绑定onsubmit事件* 监听器中判断每个方法检验的结果，如果都是true，则监听器方法返回true；如果有一个为false,* 则监听器方法返回false* 2.定义一些方法分别校验各个表单项* 3.给各个表单项绑定onblur事件，失去焦点后触发校验监听器*/window.onload = function () {// 1.给表单绑定onsubmit事件document.getElementById("form").onsubmit = function () {// 调用用户名校验方法，调用密码校验方法return checkUsername() && checkPassword() && checkPhoneNumber() && checkEmail() && checkVerCode();};// 给用户名输入框注册离焦事件监听器document.getElementById("userName").onblur = function () {// 调用校验用户名的方法checkUsername();};// 给密码输入框注册离焦事件监听器document.getElementById("password").onblur = function () {// 调用校验密码的方法checkPassword();};// 给手机号输入框注册离焦事件监听器document.getElementById("phoneNumber").onblur = function () {// 调用校验手机号的方法checkPhoneNumber();}// 给邮箱输入框注册离焦事件监听器document.getElementById("email").onblur = function () {// 调用校验邮箱的方法checkEmail();}// 给验证码输入框绑定离焦事件document.getElementById("verCode").onblur = function () {// 调用校验验证码的方法checkVerCode();}};// 校验用户名function checkUsername() {// 1.获取用户名var userName = document.getElementById("userName").value;// 2.定义正则表达式var regUserName = /^\w{6,12}$/;// 3.判断用户名是否符合正则表达式var flag = regUserName.test(userName);// 4.提示信息if (flag) {// 提示对钩document.getElementById("prompt-un").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 提示：用户名格式错误document.getElementById("prompt-un").innerHTML = "用户名格式错误！";}return flag;}/*** 校验密码*/function checkPassword() {// 1.获取密码var password = document.getElementById("password").value;// 2.定义正则表达式var regPassword = /^\w{6,12}$/;// 3.判断密码是否符合正则表达式var flag = regPassword.test(password);// 4.提示信息if (flag) {// 符合正则表达式则提示对钩document.getElementById("prompt-pw").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 不符合正则表达式则提示：密码格式错误document.getElementById("prompt-pw").innerHTML = "密码格式错误！";}return flag;}// 校验邮箱function checkEmail() {let flag = true;// 获取邮箱地址let email = document.getElementById("email").value;if (!email) {// 如果邮箱为空，直接返回truereturn flag;}let regEmail = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;flag = regEmail.test(email);if (flag) {// 如果符合正则表达式则显示对钩图标document.getElementById("prompt-email").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 如果不符合正则表达式则显示：邮箱格式错误document.getElementById("prompt-email").innerHTML = "邮箱格式错误";}}// 校验手机号码function checkPhoneNumber() {var flag = true;// 获取手机号码var phoneNumber = document.getElementById("phoneNumber").value;if (!phoneNumber) {// 手机号为空，直接返回truereturn flag;}var regPhoneNumber = /(\+86)?1\d{10}/;flag = regPhoneNumber.test(phoneNumber);if (flag) {// 符合正则表达式则显示对钩document.getElementById("prompt-pn").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 不符合正则表达式则显示：手机号格式错误document.getElementById("prompt-pn").innerHTML = "手机号格式错误";}return flag;}// 校验验证码function checkVerCode() {// 获取验证码let verCode = document.getElementById("verCode").value;// 定义正则表达式，匹配任意数字或英文字母组合而成的6个字符let regVerCode = /^[\d\a]{6}$/;// 校验验证码let flag = regVerCode.test(verCode);if (flag) {// 验证码格式正确则调用服务端的校验验证码的接口，这里省略document.getElementById("prompt-vc").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 验证码格式错误，显示：验证码格式错误document.getElementById("prompt-vc").innerHTML = "验证码格式错误";}return flag;}</script></head>
<body>
<!--注册窗口-->
<div class="layout"><!--窗口标题--><div id="div_left" class="div-left"><p class="title-en">新用户注册</p><p class="title-zh">USER REGISTER</p></div><div id="div_center" class="div-center"><!--注册表单项--><form id="form" action="#" method="get"><table><tr><td class="td-left"><label for="userName">用户名</label></td><td class="td-right"><input type="text" name="userName" id="userName" placeholder="请输入用户名"><spanid="prompt-un" class="error"></span></td></tr><tr><td class="td-left"><label for="password">密码</label></td><td class="td-right"><input type="text" name="password" id="password" placeholder="请输入密码"><spanid="prompt-pw" 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="请输入邮箱"><spanid="prompt-email" class="error"></span></td></tr><tr><td class="td-left"><label for="realName">姓名</label></td><td class="td-right"><input type="text" name="realName" id="realName" placeholder="请输入姓名"></td></tr><tr><td class="td-left"><label for="phoneNumber">手机号</label></td><td class="td-right"><input type="text" name="phoneNumber" id="phoneNumber"placeholder="请输入手机号"><span id="prompt-pn" class="error"></span></td></tr><tr><td class="td-left">性别</td><td class="td-right"><input type="radio" value="0"> 男 <input type="radio" value="1"> 女</td></tr><tr><td class="td-left">出生日期</td><td class="td-right"><input type="date" name="birthday" id="birthday"></td></tr><tr><td class="td-left"><label for="verCode">验证码</label></td><td class="td-right"><input type="text" name="verCode" id="verCode" placeholder="请输入验证码"><imgid="img-check"src="data:image/ver_code.png"/><span id="prompt-vc" class="error"></span></td></tr><tr><td colspan="2" id="td-btn" class="td-btn"><input type="submit" value="注册" id="sub-btn"></td></tr></table></form></div><!--登录指引--><div id="div-right" class="div-right"><p>已有账号？<a href="#">立即登录</a></p></div>
</div>
</body>
</html>

注册界面演示代码（前端开发）相关推荐

java界面设计代码_Android开发——纯JAVA代码方式界面设计
之前我们写Android页面都是在XML文件里写的,今天我们换个口味,在JAVA文件里写我们的Android页面.至于为什么要用java来写,不直接在XML文件里写,这个问题的答案很简单,因为麻烦嘛, ...
商品结算页面html代码,前端开发jQuery购物车结算页面代码
/p> < 购物车结算 .shop-total, .all-total { height: 50px; line-height: 50px; font-weight: bold; colo ...
软件测试代码很难？手把手教你写出阿里巴巴注册界面
那么今天的话呢,带大家来学习的是三个内容文章首发于公众号:程序员阿沐本节大纲: 01.认识HTML 02.表单的运用 03.阿里巴巴注册界面的实现我们要去实现阿里巴巴注册界面,一个前端界面. 我 ...
AndroidStudio实现用户登录注册界面代码（二）
上次完成了登录界面的实现,今天分享一下注册界面的布局以及代码和MD5的加密. 一.首先创建一个Activity,命名为SecondActivity,当然名字随意命名,我比较懒所以我的基本都是first ...
阿里巴巴注册界面详解
前言: 我们要去实现阿里巴巴注册界面,一个前端界面.我们应该去做一个什么内容? 我们这个的实现是用HTML语言来写的,所以首先第一个呢,我们来认识一下什么是HTML,我们再来学习在HTML中间我们怎么 ...
web前端开发新技术，CSS介绍
一.如何入门,学习建议在你开始入手学习前,有一些小的建议.根据我自己学习的经验发现,这些建议在现在乃至我以后的岗位生涯里都是有很大帮助的.还有就是开始学习前,建议可以先花几天时间,查找一些如何入门的 ...
html标签之列表标签，前端开发资料分享
前言年前准备换工作,总结了一波面试最频繁的面试问题跟大家交流.此文章是关于浏览器的常见问题,大概面试10家遇到6家提问类似问题(主要是大厂和中厂).目前入职滴滴出行成都团队. 一.如何入门,学习建议 ...
前端开发培训基地，教你用CSS清除样式
一.如何入门,学习建议在你开始入手学习前,有一些小的建议.根据我自己学习的经验发现,这些建议在现在乃至我以后的岗位生涯里都是有很大帮助的.还有就是开始学习前,建议可以先花几天时间,查找一些如何入门的 ...
web前端开发培训，261页前端面试题宝典
一.如何入门,学习建议在你开始入手学习前,有一些小的建议.根据我自己学习的经验发现,这些建议在现在乃至我以后的岗位生涯里都是有很大帮助的.还有就是开始学习前,建议可以先花几天时间,查找一些如何入门的 ...

注册界面演示代码（前端开发）

注册界面演示代码（前端开发）相关推荐

最新文章

热门文章