前辈们请跳过

 

前端入门学习第二天,对照W3C的文档写了简单的登录注册实现。

     
html和css,js分别负责网页的界面、样式、动作。其中html提供的标签配合CSS实现界面美化的功能,CSS3中加入了新的样式,HTML5中也加入了更加方便的控件选择。例如本次页面中的输入框中提示就是用新加入的
placeholder实现。谷歌、火狐等浏览器都可以正常解析。

login.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>login</title>
        <link type="text/css"  rel="stylesheet" href="css/login.css" />
    </head>
    <body>
        <div class="top">
          <a href="index.html" class="Wel">Welcome to login</a>
        </div>
            <span class="title"></span>
            
            <div class="card">
                <div class="img">
                    <img src="" />
                </div>
                <div class="card_body">
                    <form action="index.html" method="post">
                        <div class="form-group">
                            <label for="username">用户名:</label>
                            <input type="text" name="username"
placeholder="请输入您的用户名" οnchange="chkname()" id="username" /><br />
                            <p id="tip"class="tip"></p>
                        </div>
                        <div class="form-group">
                            <label
for="password">密   码:</label>
                            <input type="password" name="password" 
placeholder="请输入您的密码" οnchange="chkpassword()" id="password" /><br />
                            <p id="tip2"class="tip"></p>
                        </div>
                        <div class="form-group">
                            <label for="checkcode">验证码:</label>
                            <input type="text" name="checkcode"
placeholder="验证码" οnchange="chkcode()" id="checkcode"/><br /><br />
                        </div>
                        <button type="button" οnclick="check()" >确认登录</button>
                    </form>
                    <p class="jump">没有账号?立即<a href="register.html">注册</a></p>
                </div>
            </div>    
        <script src="js/login.js"></script>
    </body>
</html>

login.js:

function chkname(){
    str=document.getElementById("username").value;
    if (!(/^\w+$/.test(str)) && str.length>0){
        document.getElementById("tip").innerHTML="*用户名须由字母数字下划线组成!";
        // document.write("用户名须由字母数字下划线组成");
    }else{
        document.getElementById("tip").innerHTML="";
    }
}
function chkpassword(){
    str=document.getElementById("password").value;
    if(str.length<8 && str){
        document.getElementById("tip2").innerHTML="*密码不可以少于八位!";
        
    }else{
        document.getElementById("tip2").innerHTML="";
    }
}
    
function chkcode(){
    str = document.getElementById("checkcode").value;
    if(!str){
        alert("请输入验证码!");
    }    
}

 

 

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信