网站制作JavaScript仿新浪注册页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }
        
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }
        
        .wrong {
            color: red;
            background-image: url(images/wrong.png);
        }
        
        .right {
            color: green;
            background-image: url(images/right.png);
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        // 首先判断的事件是表单失去焦点 onblur
        // 如果输入正确则提示正确的信息颜色为绿色小图标变化
        // 如果输入不是6到16位,则提示错误信息颜色为红色 小图标变化
        // 因为里面变化样式较多,我们采取className修改样式
        // 1.获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //2. 注册事件 失去焦点
        ipt.onblur = function() {
            // 根据表单里面值的长度 ipt.value.length
            if (this.value.length < 6 || this.value.length > 16) {
                // console.log('错误');
                message.className = 'message wrong';
                message.innerHTML = '您输入的位数不对要求6~16位';
            } else {
                message.className = 'message right';
                message.innerHTML = '您输入的正确';
            }
        }
    </script>
</body>

</html>

  • JavaScript缓动动画多个目标值之间移动源码
    本文是教大家用JavaScript实现缓动动画多个目标值之间移动的例子。
  • javascript制作按钮的排他思想(算法)
    本文是教大家如何制作制作按钮的排他思想(算法),这个是很常见的一种算法,也是javascript比较基础的内容。
  • linux-php环境下配置redis的详细步骤
    本文教大家如何在linux系统中配置redis,开发代码是PHP,具体步骤详见内容,亲自测试过。
  • widows+iis“”HTTP/1.1 新建会话失败“”的解决办法
    几天登录网站后台突然出现“HTTP/1.1 新建会话失败”,不知道是什么原因,去百度搜索寻找答案。找到一下解决方法。
  • JavaScript缓动动画多个目标值之间移动源码
    本文是教大家用JavaScript实现缓动动画多个目标值之间移动的例子。
  • redis配置主从服务器
    本文教大家如何用redis配置主从服务器,经过本人测试过,步骤详细简单易懂。
  • Windows10 server如何安装composer
    本文是介绍windows10 server系统中安装composer的具体步骤,此步骤经过本人实践操作过的,认真按照步骤操作就可以成功安装。
  • 如何布局您的PC站和移动站,并表达两者之间内容的对应关系
    目前较流量的PC站与移动站配置方式有三种,百度站在搜索引擎角度将这三种分别称为跳转适配、代码适配和自适应,以下为这三种配置方式的名词解释及异同对比。
  • iis环境下如何配置PHP?
    本文教大家如何在iis环境下配置PHP。
  • php开发站内信,消息已读未读
    本文有一篇值得推荐的,设计思路与方案值得学习一下。主要是有思路,再到数据库的设计都有!这样写代码也是清晰明了了。
  • 网站制作 服务

    免费网站制作报价,免费优化,1对1服务,个性化定制服务

    pc和wap网站制作

    多年建站经验,上千个成功案例,
    为您提供一站式服务

    网站维护改版

    大厂经验工程师对现有网站进行
    改版,修复,维护。

    小程序制作

    微信小程序,支付宝小程序,
    百度小程序

    响应式网页设计

    响应式网页设计可以与多种设备兼容,
    如智能手机,平板电脑和PC