文档章节

前端那些事之原生js 之注册页面

上官清偌
 上官清偌
发布于 2017/04/23 16:40
字数 911
阅读 28
收藏 0

封装注册页面

html部分

<!--引入头部文件防止IE布局变乱-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/register.css">
    <title>注册</title>
</head>
<body>
<div class="login-head">
    <div class="wrapper">
        <a href="index.html"><img src="images/logo.png"></a>
    </div>
</div>
<div class="wrapper mt30 ">
    <form class="member-forms" action="login.html" onsubmit="return checkForm()">
        <div class="mf-head rel">
            <span class="f24">新用户注册</span>
            <span class="gray mf-head-link">已有账号?<a href="登陆.html">立即登陆</a></span>
        </div>
        <div class="mf-line">
            <span class="mf-name">手机号</span>
            <input type="text" id="username" placeholder="您的登陆手机号" class="mf-txt">
        </div>
        <div class="mf-line">
            <span class="mf-name">密码</span>
            <input type="text" id="password" placeholder="您的登陆账户密码" class="mf-txt">
        </div>
        <div class="mf-line">
            <span class="mf-name">性别</span>
            <label><input type="radio" checked="" name="sex" class="">男</label>
            <label><input type="radio" name="sex" class="">女</label>
        </div>
        <div class="mf-line">
            <span class="mf-name">城市</span>
            <input type="hidden" placeholder="您的所在城市" class="mf-txt" readonly="">
            <div class="mf-txt mf-select gray">请选择您所在的城市</div>
            <div class="select hide">
                <a href="javascript:void(0);">北京</a>
                <a href="javascript:void(0);">上海</a>
                <a href="javascript:void(0);">深圳</a>
                <a href="javascript:void(0);">长沙</a>
            </div>
        </div>
        <div class="mf-line">
            <span class="mf-name">邮箱</span>
            <input type="text" id="email" placeholder="您的邮箱账号" class="mf-txt">
        </div>
        <input type="submit" id="loginBtn" class="mf-btn mt30" value="确定登陆">
    </form>
</div>  
</body>
</html>

css部分

@charset "utf-8";
/* 登陆注册 start */
.login-head{
    box-shadow:0 2px 6px hsla(0,0%,0%,0.3);
    padding:10px 0px;
}
.member-forms {
    max-width:400px;
}
.member-forms .mf-head-link{
    position:absolute;
    right:0px;
    top:10px;
}
.member-forms .mf-line{
    margin-top:32px;
    border:1px solid #ddd;
    line-height:52px;
    padding-left:110px;
    position:relative;
}
.member-forms .mf-name{
    position:absolute;
    left:0px;
    top:0px;
    text-align:center;
    width:110px;
}
.member-forms .mf-txt{
    height:52px;
    display:block;
    width:96%;
    padding:0px 2%;
    border:0px;
}
.member-forms .mf-btn{
    height:52px;
    line-height:52px;
    background:#3887d6;
    color:#fff;
    text-align:center;
    width:100%;
    border:0px;
    cursor:pointer;
    font-size:18px;
}
.member-forms .mf-select{
    cursor:pointer;
}
.member-forms .select{
    position:absolute;
    left:110px;
    width:287px;
    background:#fff;
    border:1px solid #ddd;
    z-index:1;
    text-align:center;
}
.member-forms .select a{
    display:block;
    line-height:30px;
}
.member-forms .select a:hover{
    background:#eee;
}
/* 登陆注册 End */

/* 验证信息 start */
.show-tips{
    position:fixed;
    left:50%;
    top:5%;
    margin-left:-100px;
    z-index:1;
}
.show-tips span{
    color:#fff;
    padding:0px 25px;
    line-height:48px;
    display:inline-block;
    border-radius:2px;
    font-size:26px;
}
.show-tips div{
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background:#f90;
    opacity:0.8;
    filter:alpha(opacity=80);
    z-index:-1;
}

js 调用

 function checkForm() {
        var username=document.getElementById("username").value,
            password=document.getElementById("password").value,
            email=document.getElementById("email").value;
        var register=new Register({
            username:username,
            password:password,
            email:email,
            msgPhone:'请输入正确的手机号码',
            msgPass:'请输入正确的密码',
            msgEmail:'请输入正确的邮箱'
        })
        if(register){
            return true;
        }else{
            return false;
        }

    }
    

js封装

(function (window, undefind) {
    "use strict";
    function Register(inputVal) {
        this.init(inputVal);
    }
    Register.prototype = {
        construct: Register,
        init: function (inputVal) {
            //初始化
            this.timer = null;
            this.username = inputVal.username || '';
            this.password = inputVal.password || '';
            this.email = inputVal.email || '';
            this.msgPhone = inputVal.msgPhone || '';
            this.msgPass = inputVal.msgPass || '';
            this.msgEmail = inputVal.msgEmail || '';
            this.checkPhone(this.username, this.msgPhone);
            this.checkPwd(this.password,this.msgPass);
            this.checkEmail(this.email,this.msgEmail);
            console.log(this.username);

        },
        checkPhone: function (val, msg) {
            if (/^1[34578]\d{9}$/.test(val)) {
                return true;
            } else {
                this.tips(msg);
                return false;
            }
        },
        checkPwd:function (val,msg) {
            if(val.length < 6 || val.length > 20){
                this.tips(msg);
                return false;
            }else{
                return true;
            }
        },
        checkEmail:function (val,msg) {
            if(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(val)){
                return true;
            }else{
                this.tips(msg);
                return false;
            }
        },
        /*
         需要延迟,所以需要定时器
         传入信息,把传入信息放到div,显示div
         */
        tips: function (msg) {
            clearTimeout(this.timer);
            // if (document.getElementsByClassName("show-tips").length > 0) {
            //     document.getElementsByClassName("show-tips").remove();
            // }
            var tipDiv = document.createElement("div");
            tipDiv.className = "show-tips";
            tipDiv.innerHTML = "<span>" + msg + "</span><div></div>";
            document.body.appendChild(tipDiv);
            this.timer = setTimeout(function () {
                tipDiv.remove();
            }, 3000);
        }
    }
    window["Register"] = Register;
}(window));

select 样式的重构

  <input type="hidden" placeholder="您的所在城市" class="mf-txt" readonly="">
<div class="mf-txt mf-select gray">请选择您所在的城市</div>
            <div class="select hide">
                <a href="javascript:void(0);">北京</a>
                <a href="javascript:void(0);">上海</a>
                <a href="javascript:void(0);">深圳</a>
                <a href="javascript:void(0);">长沙</a>
            </div>

  window.onload = function () {
//        把select样式重构一下
        var selectObj=document.getElementsByClassName("mf-select"),
            selectEle=document.getElementsByClassName("select")[0].children;
        for (var i = 0; i < selectObj.length; i++) {
            selectObj[i].onclick=function () {
                this.nextElementSibling.className=this.nextElementSibling.className.replace("hide","").trim();
            }
        }
        for (var i = 0; i < selectEle.length; i++) {
            selectEle[i].onclick=function () {
                this.parentElement.previousElementSibling.textContent=this.textContent;
                this.parentElement.className="select hide";
                this.parentElement.previousElementSibling.previousElementSibling.value = this.textContent;
            }
            
        }

    }

© 著作权归作者所有

共有 人打赏支持
上官清偌
粉丝 11
博文 87
码字总数 123671
作品 0
浦东
程序员
私信 提问
【quickhybrid】H5和Native交互原理

前言 架构的核心就是交互,而实现这个交互的前提是弄清楚H5和Native端的交互 本文主要介绍Native端(Android/iOS)和H5端(泛指前端)的交互原理 (之前也整理过类似的文章,本系列重新梳理)...

dailc
07/01
0
0
Native 与 H5 交互的那些事

Hybrid开发模式目前几乎每家公司都有涉及和使用,这种开发模式兼具良好的Native用户交互体验的优势与WebApp跨平台的优势,而这种 模式,在Android中必然需要WebView作为载体来展示H5内容和进...

oschina
2016/05/03
11.2K
10
如何基于Rexsee实现以Web开发方式创建Android应用

Rexsee是国内的开源移动Web开发平台,针对Android手机、触摸屏等终端设备,提供底层开发和运行平台,以及扩展工具包,简化基于SDK的Java原生开发,支持开发者以标准化Web开发模式,即HTML5,...

yejiang
2012/04/19
0
0
移动端本地 H5 秒开方案探索与实现

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 企业微信移动端项目中有需求要展示数据趋势的可视化图表,经过调研,最终决定以单页面 H5 来完成,对 APP 里的一些使用 H5 实现的...

腾讯云加社区
06/11
0
0
Weex-iOS源码阅读(一)初始化和函数调用

weex是基于JavaScriptCore实现的,看代码之前有必要先了解下JavaScriptCore,相关内容移到: iOS-JavaScriptCore 先说说我理解的跨平台技术,其实我们做的移动端产品基本都是跨平台的,Andro...

正谦
08/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

设计模式“6”大原则!

面向对象设计原则 概述 对于面向对象软件系统的设计而言,在支持可维护性的同时,提高系统的可复用性是一个至关重要的问题,如何同时提高一个软件系统的可维护性和可复用性是面向对象设计需要...

Java干货分享
12分钟前
0
0
mybatis学习(1)

JDBC连接方式: 1.底层没有使用连接池,操作数据库需要频繁的创建和关闭连接,消耗资源。 2.写原生的JDBC代码在JAVA中,一旦需要修改SQL的话(比如表增加字段),JAVA需要整体重新编译,不利...

杨健-YJ
今天
4
0
怎么组织文档

可以从以下几个方面考虑组织文档: ☐ 各种分支的界面截图和对应的类及文件 ☐ 框架或类图 ☐ 流程图 ☐ 时序图 ☐ 注意事项

-___-
今天
4
0
分布式之数据库和缓存双写一致性方案解析

引言 为什么写这篇文章? 首先,缓存由于其高并发和高性能的特性,已经在项目中被广泛使用。在读取缓存方面,大家没啥疑问,都是按照下图的流程来进行业务操作。 但是在更新缓存方面,对于更...

别打我会飞
今天
19
0
我的oracle11G,12c OCM之路

ocm认证感悟 ---------------------- 距离拿到ocm证书已经过了1年的时间,当初拿到证书的心情到现在还记得。其实在每个DBA心里都有一个成为强者的梦想,需要被认可,我也一样。我干过开发,做...

hnairdb
今天
7
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部