zoukankan      html  css  js  c++  java
  • js实现登陆界面

    代码分享:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    input[type]{
    border: 1px solid darkorange;
    background: white;
    }
    #button{
    border: 10px solid orange;
    200px;
    box-shadow:0px 4px 5px #666;
    background: orange;
    color: white;
    }
    </style>
    </head>
    <body>
    <center>
    <div>
    <form>
    <h3>用户注册</h3>
    <hr>
    <p>用户名:<input type="text" id="name" placeholder="请填写用户名" required="required" onblur="name1()" <!--onfocus="name2()-->"><br><span id="tel"></span></p>
    <p>密码:<input id="paswd" type="password" placeholder="请填写密码" onblur="pwd1()" required="required" onfocus="pwd2()"><br><span id="pw"></span></p>
    <p>确认密码:<input id="paswd2" type="password" placeholder="请确认密码" required="required" onkeyup="validate()" ><br><span id="qpwtx"></span></p>
    <p>邮箱:<input type="email" placeholder="请填写邮箱" required="required"></p>
    <p><input type="checkbox" required="required">我已阅读注册手册</p>
    <p><input type="submit" id="button" value="注册"></p>
    </form>
    </div>
    </center>
    </body>
    <script>
    function name1(){
    var name=document.getElementById("name").value;
    if(name.length==""){
    document.getElementById("tel").innerHTML="用户名不能为空"
    document.getElementById("tel").style.color="red";
    }else{
    document.getElementById("tel").innerHTML="√"
    document.getElementById("tel").style.color="green";
    }
    }
    function pwd2(){
    document.getElementById("pw").innerHTML="请填写6-12位的密码"
    document.getElementById("pw").style.color="#999";

    }
    function pwd1(){
    p=document.getElementById("paswd").value;

    if(p.length>=6&&p.length<=20)
    {
    document.getElementById("pw").innerHTML="√"
    document.getElementById("pw").style.color="green";
    }else{
    document.getElementById("pw").innerHTML="格式错误,请输入6-20位"
    document.getElementById("pw").style.color="red";
    }
    }
    function validate(){
    var qpw=document.getElementById("paswd").value;
    var qpw2=document.getElementById("paswd2").value;

    if(qpw==qpw2 && p.length>=6&&p.length<=20){
    document.getElementById("qpwtx").innerHTML="<font color='green'>√</font>";
    document.getElementById("button").disabled = false;
    }
    else {
    document.getElementById("qpwtx").innerHTML="<font color='red'>两次密码不相同或者格式错误</font>";
    document.getElementById("button").disabled = true;
    }
    }
    </script>
    </html>

    效果截图:

  • 相关阅读:
    HDU 2852 KiKi's K-Number (主席树)
    HDU 2089 不要62
    Light oj 1140 How Many Zeroes?
    Bless You Autocorrect!
    HDU 6201 transaction transaction transaction
    HDU1561 The more ,The better (树形背包Dp)
    CodeForces 607B zuma
    POJ 1651 Mulitiplication Puzzle
    CSUOJ 1952 合并石子
    Uva 1599 Ideal path
  • 原文地址:https://www.cnblogs.com/MissZhao/p/5746619.html
Copyright © 2011-2022 走看看