woniu_family
/
regesiter.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/register.css" />
  </head>
  <body>
    <main>
      <div class="logo">
        <a href="./index.html" class="link_a">
          <img src="./images/logo.png" alt="" />
        </a>
      </div>
      <form action="">
        <div>用户注册</div>
        <input type="text" name="username" placeholder="昵称/邮箱/手机号" /><span></span>
        <input type="password" name="pwd" placeholder="密码" />
        <input type="password" name="repeat_pwd" placeholder="确认密码" />
        <div>
          <input type="text" name="verify" placeholder="验证码" />
          <a href="" class="link_a">
            <img src="./images/temp/code.jpg" alt="" />
          </a>
        </div>
        <button type="submit">登录</button>
        <div>
          <span>完成此注册，即表明您同意了我们的</span>
          <a href="" class="note">《使用条款和隐私策略》</a>
        </div>
        <div><a href="./login.html" class="link_a">已有账号登录</a></div>
      </form>
    </main>
    <script>
       /**  用户名输入检测   */
       // 定义这个用户名输入框
       let uname_input = document.querySelector("input[name='username']")
       // 定义一个检测用户名的正则表达式
       let uname_reg = new RegExp("^[a-zA-Z0-9-_]{6,10}$")
       // 定义检测用户名输入规则
       function checkUname(){
         if(!uname_reg.test(uname_input.value)){
           uname_input.nextElementSibling.style.fontSize = "11px"
           uname_input.nextElementSibling.style.color = "red"
           uname_input.nextElementSibling.innerHTML = "请输入6-10位用户名，可以使用26位大小写字母和数字"
           return false
         }else{
           uname_input.nextElementSibling.innerHTML = ""
           return true
         }
       }
       //   失去焦点启用规则检测
       // change 改变函数
       uname_input.addEventListener("change",checkUname)
       /**  用户名输入检测  结束 */
    </script>
  </body>
</html>