HTML+CSS+JS————《SW音乐管理系统》

一、登录页面login.html，实现登录功能。要求邮箱输入框和密码输入框失焦时验证非空。

二、登录页面login.html，实现登录功能。要求邮箱输入框失焦时验证必须包含“@sw.com”，并且密码输入框失焦时验证长度大于6位，全为数字。 

三、登录页面login.html，实现登录功能。邮箱输入框和密码输入框失焦时如验证通过。

四、点击“登录”按钮时，若验证全部通过，则提交至index.html页面，否则不提交。

 五、系统首页index.html,完成歌曲新增功能，若新增歌曲信息框为空，则给出提示。

 

 六、系统首页index.html,完成歌曲新增功能，若新增歌曲信息框不为空，则将歌曲新增致歌曲列表并清空新增歌曲信息框。

登录页

Login.html————html代码

 

 <div id="contanier">
        <!-- 最外层 -->
        <div id="form">
            <form action="index.html" name="form1" onsubmit="return check()">
                <fieldset class="form-content">
                    <legend class="form-content__title">SW云音乐歌曲管理系统登录</legend>
                    <div class="form-content__details">
                        <label class="form-content__txt">邮箱:</label>
                        <input type="text" class="form-content__input" id="email" onkeyup="check()">
                        <span id="checkUserNameResult"></span>
                        <br>
                        <br>
                        <label class="form-content__txt">密码:</label>
                        <input type="password" class="form-content__input" id="password" onblur="check()">
                        <span id="checkUsePwdResult"></span>
                        <br>
                        <br>
                        <input class="form-content__btn" type="submit" value="登录" onclick="check()">
                        <input class="form-content__btn" type="button" value="取消">
                    </div>
                </fieldset>

            </form>
        </div>
    </div>

 Login.html————js代码

 

<script type="text/javascript">
        function check() {
            //获取email值
            var email = document.getElementById("email").value;
            //获取密码值
            var Pwd = document.getElementById("password").value;
            var x = document.forms["form1"]["email"].value;
            //邮箱包含@sw.com
            var atp = x.indexOf("@sw.com");
            //纯数字且长度大于6————正则表达式
            var reg = /^\d{6,16}$/;


            if (email.trim() == "" || Pwd.trim() == "") {

                document.getElementById("checkUserNameResult").innerHTML = "<font color='red'>邮箱不能为空!</font>";

                if (email.length > 0) {
                    if (atp < 0) {
                        // 判断邮箱是否包含@sw.com
                        document.getElementById("checkUserNameResult").innerHTML = "<font color='red'>邮箱必须包含@sw.com!</font>";
                    } else {
                        document.getElementById("checkUserNameResult").innerHTML = "<font color='green'>✔</font>";
                        return true
                    }
                }
                document.getElementById("checkUsePwdResult").innerHTML = "<font color='red'>密码不能为空!</font>";
                return false;

            } else if (!reg.test(Pwd)) {
                // 判断长度和纯数字
                document.getElementById("checkUsePwdResult").innerHTML = "<font color='red'>密码必须全为数字且大于6位!</font>";
                return false;
            }
            else {
                document.getElementById("checkUsePwdResult").innerHTML = "<font color='green'>✔</font>";
                window.location = 'index.html';
                return true;
            }
        }
    </script>

 Login.html————css代码

* {
    margin: 0px;
    padding: 0px;
}

.form-content {
    margin: 0px auto;
    width: 600px;
    height: 200px;
    /* margin: 200px auto; */
}

.form-content__title {
    font-weight: bold;
    margin: 0px 15px;
}

.form-content__txt {
    font-size: 18px;
}

.form-content__input {
    width: 220px;
    height: 20px;
}

.form-content__details {
    margin: 30px 15px;
}

.form-content__btn {
    width: 45px;
    height: 30px;
    position: relative;
    left: 225px;
    font-size: 15px;
}

首页

index.html——————html代码

<fieldset>
        <legend>SW云音乐歌曲管理系统歌曲添加</legend>
        <ul id="msg">
            <li>周杰伦-花海</li>
            <li>林俊杰-江南</li>
            <li>陈奕迅-单车</li>
            <li>梁静茹-勇气</li>
        </ul>
        <h3>请输入要添加的歌曲信息:&nbsp;&nbsp;<input type="text" id="song"></h3>
        <input type="button" value="添加" id="addBtn" onclick="mu()">
        &nbsp;&nbsp;
        <span id="htmlRed"></span>
    </fieldset>

index.html——————js代码(使用JQuery完成)

$("#addBtn").click(function() {
            //jquery写法
               if ($("#song").val()=="") {
                    //判断用户输入的值是否为空
                $("#htmlRed").html("添加歌曲不能为空!").css("color","red");
               } else{
                var $li = $("<li>"+$("#song").val()+"</li>");
                $li.appendTo($('ul'));
                $("#song").val("");
                //将“添加歌曲不能为空”清空
                $("#htmlRed").html("");
               }
            });

index.html——————js代码(原生js)

function mu() {
            //js原生写法
             var song = document.getElementById("song").value;
             if (song.trim()=="") {
                    //判断用户是否输入
                 document.getElementById("htmlRed").innerHTML="<font color='red'>添加歌曲不能为空!</font>";
            }else{
                 let li1 = document.createElement("li");
                 let song1 = document.getElementById("song").value;
                li1.append(song1);
                 let ul = document.getElementsByTagName('ul').item(0);
                 ul.append(li1);
             }
         }