网页效果截图：
源码：
HTML代码（login.html）
<!DOCTYPE html>
<html>
    <head lang="zh-CN">
        <title>表单登录页面</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
        <link href="login.css" rel="stylesheet" type="text/css"/>
        <link href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div class="form-box">
            <div class="welcom">
                <span>欢迎您的到来</span>
            </div>
            <div class="input-box">
                <form class="form-horizontal" role="form" action="/" method="POST" enctype="text/plain">
                    <div class="form-group ">
                        <label for="username" class="control-label col-md-3">Username:</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" id="username" placeholder="请
输入用户名"/>
                            <label class="nameinfo"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="control-label col-md-3">Password:</label>
                        <div class="col-md-9">
                            <input type="password" maxlength="10" class="form-control" id="password" placeholder="请输入密码"/>
                            <label class="passwordinfo"></label>
                        </div>
                    </div>
                    <div class="submit-button">
                        <button type="button">
                                <span>Login</span>
                        </button>   
                    </div>
                </form>
            </div>   
        </div>
        <script src="jquery.min.js"></script>
        <script src="dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="login.js"></script>
       
        <noscript>
            <div>脚本已被禁用了，〒_〒...</div>
        </noscript>
    </body>
</html>
CSS代码（login.css）
*{
    padding:0;
    margin:0;
}
body {
    /* overflow:scroll; */
    font-family:Georgia;
    color:#000;
   
    }
.form-box {
    width:470px;
    height:296px;
    margin:100px auto;
    border:3px #ADFF2F solid;
    background-color:#C5FF6D;
    border-radius:8px;
}
.welcom {
    width:100%;
    height:52px;
    line-height:52px;
    text-align:center;
    font-size:30px;
    font-family:Microsoft YaHei;
    font-weight:bold;
    border-bottom:1px #ADFF2F solid;
}
.input-box {
    position:relative;
    width:100%;
    height:248px;
    padding-top:30px;
}
.form-group {
    width:100%;
    height:50px;
    line-height:50px;
}
.form-group label,.form-group input {
    display:block;
    height:40px;
    font-size:16px;
   
}
.submit-button button {
    position:absolute;
    top:190px;
    left:2%;
    width:96%;
    height:42px;
    line-height:42px;
    border-style:none;
    border:2px #75FF58 solid;
    border-radius:3px;
    background-color:#86FF6D;
   
}.submit-button  span {
    font-size:20px;
    font-weight:bold;
}
JS代码：（login.js）
$(function(){
            //设定两个标志，判断是否满足提交的条件
            var ok1=false;
            var ok2=false;
            //设定键盘事件，回车换行
            $(".form-control").keydown(function(event){
                //判断是否是回车键
                if(event.which == '13'){
                    if($(this).val().length == 0){
                    }
                    else{
                        var currIndex = $(this).index(':input');
                        $(':input:eq('+(currIndex+1)+')').focus();
                    }
                }
            });
           
            // 验证用户名
            $('input[id="username"]').blur(function(){
                var nameform=$(this).val();
                // 验证是否输入用户名
                if($(this).val() == ""){
                    $(".nameinfo").html("用户名不能为空！");
                    $(".nameinfo").css({"color":"red","font-family":"KaiTi","font-size":"16px"});
                }
                // 验证用户名是否大于六位
                else if($(this).val().length < 6){
                    $(".nameinfo").html("用户名至少为6位！");
                    $(".nameinfo").css({"color":"red","font-family":"KaiTi","font-size":"16px"});
                }
                //验证用户名格式是否正确
                else
                    if(!nameform.match(/^[a-zA-Z][a-zA-Z0-9@]*$/)){
                    $(".nameinfo").html("用户名格式不正确！");
                    $(".nameinfo").css({"color":"red","font-family":"KaiTi","font-size":"16px"});
                }
                else{
                    $(".nameinfo").html("输入正确");
                    $(".nameinfo").css({"color":"green","font-family":"KaiTi","font-size":"16px"});
                    //验证通过，将标志位置为true
                    ok1 = true;
                }               
            });
           
            //验证密码
            $('input[id="password"]').blur(function(){
                if($(this).val() == "" ){
                    $(".passwordinfo").html("密码不能为空！");
                    $(".passwordinfo").css({"color":"red","font-family":"KaiTi","font-size":"16px"});
                }
                else if($(this).val().length < 6){
                    $(".passwordinfo").html("密码至少为6位！");
                    $(".passwordinfo").css({"color":"red","font-family":"KaiTi","font-size":"16px"});
                }
                else{
                    $(".passwordinfo").html("输入正确");
css简单网页代码                    $(".passwordinfo").css({"color":"green","font-family":"KaiTi","font-size":"16px"});
                    ok2 = true;
                }
               
            });
           
            //输入不合法的情况下，获取焦点时清空错误输入
            $('input[id="username"]').focus(function(){
                if(!ok1){
                    $('input[id="username"]').val("");
                }
            });
            $('input[id="password"]').focus(function(){
                if(!ok2){

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。