文档章节

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

上官清偌
 上官清偌
发布于 2017/04/23 16:40
字数 911
阅读 24
收藏 0
点赞 0
评论 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
博文 85
码字总数 118451
作品 0
浦东
程序员
移动端本地 H5 秒开方案探索与实现

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

腾讯云加社区 ⋅ 06/11 ⋅ 0

weex eros框架源码解析

weex eros是基于alibaba weex框架进行二次封装的客户端跨平台开发框架,主要是为前端开发者(可以不用熟悉客户端开发)提供的一站式客户端app开发解决方案。官网地址为:https://bmfe.github...

雅爸学技术 ⋅ 05/27 ⋅ 0

将一个前端项目改写为chromo插件(一)

编写第一个chrome插件? 编写chrome插件完全就是前端知识加上一些专门的知识。 假设文件夹下有文件 嗯,现在看来他只是普通的html,其实,你只要在当前文件夹下加上文件,chrome浏览器就可以把...

saltfish666 ⋅ 05/27 ⋅ 0

小程序iOS客户端框架——控件事件逻辑框架与控件原生化

小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。小程序也体现了“用...

codeGoogle ⋅ 04/24 ⋅ 0

小程序iOS客户端框架—控件事件逻辑框架与控件原生化

小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。小程序也体现了“用...

codeGoogle ⋅ 04/26 ⋅ 0

[译] JavaScript 是如何工作的:Service Worker 的生命周期与使用场景

原文地址:How JavaScript works: Service Workers, their lifecycle and use cases 原文作者:Alexander Zlatkov 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:t...

LeviDing ⋅ 05/31 ⋅ 0

React Native 与原生模块数据通信(一)(iOS)

(一)iOS日历模块封装演示 下面开始演示如何封装一个iOS日历原生模块,让JavaScript可以进行访问到iOS平台日历的功能。 在React Native中,原生模块就是一个Objective-C类,该实现了RCTBridge...

manofit ⋅ 05/24 ⋅ 0

用JS搞了一个自动翻译,从此不再头疼看英文书了

小记:作为一个有追求的码农,“懒”,不一定是一个贬义词。有时候“懒”,才是进步的动力! 背景 经常遇到这样的情况,发现一本眼馋的技术书📚,却发现只有英文版。慢慢啃吗?真的很痛苦。...

gavin103 ⋅ 05/21 ⋅ 0

React Native SDK for OSS

此文主要介绍 React Native SDK for OSS的方方面面,包括相关基本概念、项目背景、项目方案、环境搭建运行、使用姿势、注意事项等。文末的附件可运行Example Zip压缩包和针对新手的入门实用文...

zuozhao ⋅ 05/18 ⋅ 0

精读《现代 js 框架存在的根本原因》

1 引言 深入思考为何前端需要框架,以及 web components 是否可以代替前端框架? 原文地址,建议先阅读原文,或者阅读概述。 2 概述 现在前端框架非常多了,如果让我们回答 “为什么要用前端...

黄子毅 ⋅ 05/21 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

PHP语言系统ZBLOG或许无法重现月光博客的闪耀历史[图]

最近在写博客,希望通过自己努力打造一个优秀的教育类主题博客,名动江湖,但是问题来了,现在写博客还有前途吗?面对强大的自媒体站点围剿,还有信心和可能型吗? 至于程序部分,我选择了P...

原创小博客 ⋅ 今天 ⋅ 0

IntelliJ IDEA 2018.1新特性

工欲善其事必先利其器,如果有一款IDE可以让你更高效地专注于开发以及源码阅读,为什么不试一试? 本文转载自:netty技术内幕 3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再...

Romane ⋅ 今天 ⋅ 0

浅谈设计模式之工厂模式

工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻...

佛系程序猿灬 ⋅ 今天 ⋅ 0

Dockerfile基础命令总结

FROM 指定使用的基础base image FROM scratch # 制作base image ,不使用任何基础imageFROM centos # 使用base imageFROM ubuntu:14.04 尽量使用官方的base image,为了安全 LABEL 描述作...

ExtreU ⋅ 昨天 ⋅ 0

存储,对比私有云和公有云的不同

导读 说起公共存储,很难不与后网络公司时代的选择性外包联系起来,但尽管如此,它还是具备着简单和固有的可用性。公共存储的名字听起来也缺乏专有性,很像是把东西直接堆放在那里而不会得到...

问题终结者 ⋅ 昨天 ⋅ 0

C++难点解析之const修饰符

C++难点解析之const修饰符 c++ 相比于其他编程语言,可能是最为难掌握,概念最为复杂的。结合自己平时的C++使用经验,这里将会列举出一些常见的难点并给出相应的解释。 const修饰符 const在c...

jackie8tao ⋅ 昨天 ⋅ 0

聊聊spring cloud netflix的HystrixCommands

序 本文主要研究一下spring cloud netflix的HystrixCommands。 maven <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-clo......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部