文档章节

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

上官清偌
 上官清偌
发布于 2017/04/23 16:40
字数 911
阅读 25
收藏 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
博文 84
码字总数 118568
作品 0
浦东
程序员
【quickhybrid】H5和Native交互原理

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

dailc
07/01
0
0
如何基于Rexsee实现以Web开发方式创建Android应用

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

yejiang
2012/04/19
0
0
React Native 从入门到原理

React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几。 本文分为两个部分:上半部分用通俗的语...

guozhendan
06/26
0
0
Weex-iOS源码阅读(一)初始化和函数调用

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

正谦
08/30
0
0
移动端本地 H5 秒开方案探索与实现

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

腾讯云加社区
06/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Web系统大规模并发:电商秒杀与抢购

一、大规模并发带来的挑战 在过去的工作中,我曾经面对过5w每秒的高并发秒杀功能,在这个过程中,整个Web系统遇到了很多的问题和挑战。如果Web系统不做针对性的优化,会轻而易举地陷入到异常...

xtof
今天
2
0
代码质量管理平台-sonarqube

在工作中,往往开发的时候会不怎么注重代码质量的人很多,存在着很多的漏洞和隐患等问题,sonarqube可以进行代码质量的审核,而且十分的残酷。。。。。接下来我们说下怎么安装 进入官网下载:...

落叶清风
今天
7
0
在Ubuntu安装和配置Sphinx

Ubuntu系统默认是配置有sphinx的,先检查一下,别多此一举。。。。。 在开始本指南之前,您需要: 一个Ubuntu 16.04服务器。 sudo的一个非root用户,您可以通过以下设置本教程 。 安装在服务...

阿锋zxf
今天
1
0
Qt编写输入法V2018超级终结版

对于qt嵌入式linux开发人员来说,输入法一直是个鸡肋问题,要么不支持实体键盘同步,要么不能汉字输入,要么不支持网页输入等,这几年通过陆续接触大量的各种输入法应用场景客户,得到真实需...

飞扬青云
今天
2
0
TypeScript基础入门之高级类型的多态的 this类型

转发 TypeScript基础入门之高级类型的多态的 this类型 高级类型 多态的this类型 多态的this类型表示的是某个包含类或接口的子类型。 这被称做F-bounded多态性。 它能很容易的表现连贯接口间的...

durban
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部