JavaScript综合练习（验证登录、增加节点jQuery）

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

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

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

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

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

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

 

登录页面

<style type="text/css">
      div {
        margin: 0px auto;
        width: 450px;
      }
      .txts {
        margin: 10px 10px 10px 10px;
      }
      .txt {
        margin-bottom: 10px;
      }
      .btn {
        margin: 10px 120px;
      }
</style>

<div>
      <form action="index.html" onsubmit="return login()">
        <fieldset>
          <legend>SW云音乐歌曲管理系统登录</legend>
          <div class="txts">
            邮箱：<input
              type="text"
              class="txt"
              id="email"
              onblur="emailOnblur(this)"
            />
            <span id="emailInfo"></span>
            <br />
            密码：<input type="password" class="txt" onblur="pwdOnblur(this)" />
            <span id="pwdInfo"></span>
            <br />
          </div>

          <div class="btn">
            <input type="submit" value="登录" />
            <input type="button" value="取消" />
          </div>
        </fieldset>
      </form>
</div>

<script>
        var emailCheck = false;
        var pwdCheck = false;
        function emailOnblur(obj) {
          var email = obj.value;
          var emailInfo = document.getElementById("emailInfo");
          if (email.trim() == "" || email.trim() == null) {
            emailInfo.innerHTML =
              '<span style="color:red" >邮箱不能为空</span>';
            return false;
          }
          if (email.indexOf("@sw.com") == -1) {
            emailInfo.innerHTML =
              '<span style="color:red" >邮箱必须包含@sw.com</span>';
            return false;
          }
          emailInfo.innerHTML = '<span style="color:green" >✔</span>';
          emailCheck = true;
          
          return true;
        }
        function pwdOnblur(obj) {
          var pwd = obj.value;
          var pwdInfo = document.getElementById("pwdInfo");
          if (pwd.trim() == "" || pwd.length < 7 || isNaN(pwd)) {
            pwdInfo.innerHTML =
              '<span style="color:red">密码必须全为数字且大于6位</span>';
            return false;
          }
          pwdInfo.innerHTML = '<span style="color:green" >✔</span>';
          pwdCheck = true;
          return true;
        }

        function login() {
          if (emailCheck == true && pwdCheck == true) {
           document.getElementById("email").value = '';
            return true;
          }
          alert("验证未通过，不能提交");
          return false;
        }
</script>

添加页面 

<style>
      div {
        margin: 0px auto;
        width: 400px;
      }
      label {
        font-weight: bold;
        margin-top: 10px;
      }
      #btnAdd {
        margin-top: 10px;
      }
</style>

<div>
      <fieldset>
        <legend>SW云音乐歌曲管理系统歌曲添加</legend>
        <ul>
          <li>周杰伦——花海</li>
          <li>林俊杰——江南</li>
          <li>陈奕迅——单车</li>
          <li>梁静茹——勇气</li>
        </ul>
        <label for="">请输入要添加的歌曲：</label>
        <input type="text" id="song" />
        <br />
        <input type="button" id="btnAdd" value="添加" />
        <span id="AddInfo"></span>
      </fieldset>
</div>

<script src="js/jquery-3.6.0.js"></script>
<script>
      var AddInfo = document.getElementById("AddInfo");
      $("#btnAdd").click(function () {
        if ($("#song").val() != "") {
          var $li = $("<li>" + $("#song").val() + "</li>");
          $li.appendTo($("ul"));
          $("#song").val("");
		      $('#AddInfo').html("");
        }else{
			AddInfo.innerHTML ="<span style='color:red'>添加歌曲不能为空</span>";
			
		}
      });
</script>