表单验证

最新推荐文章于 2024-08-02 00:06:19 发布

渡梵尘

最新推荐文章于 2024-08-02 00:06:19 发布

阅读量327

点赞数 1

本文链接：https://blog.csdn.net/lx_dfc/article/details/80481747

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
    padding: 0;
    margin: 0;
    list-style: none;
    }
    html,body{
      height: 100%;
    }
    body{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .bgBox{
      width: 600px;
      height: 600px;
      border: 1px solid #000;
      box-shadow: 0 0 2px 3px #000;
      background-color: darkolivegreen;
      justify-content: center;
    }
    .Box{
      width: 540px;
      height: 26px;
      line-height: 26px;
      margin: 30px;
       display: flex;
      justify-content: space-between;
    }
     button{
      margin-left: 200px;
    }
    .Box span {
      flex: 2;
      font-size: 24px;
      text-align: right;
    }
    .Box input{
      flex: 2;
      width: 200px;
      height: 26px;
    }
    .Box .yan{
      flex: 2;
      text-align: left;
      font-size: 16px;
      padding-left: 20px;
    }

    .register{
      display: block;
      width: 100px;
      height: 30px;
      background-color: darkgoldenrod;
      text-align: center;
      line-height: 30px;
      text-decoration: none;
      color: #fff;
      font-size: 22px;
      margin-left: 200px;
      box-shadow: 2px 2px 3px 3px #000;
    }
  </style>
</head>
<body>
<div class='bgBox'>
  <div class="mailBox Box">
    <span>邮箱：</span><input type="text"><span class="yan"></span>
  </div>
  <div class="userName Box">
    <span>用户名：</span><input type="text"><span class="yan"></span>
  </div>

  <div class="number Box">
    <span>手机号：</span><input type="text"><span class="yan">
  </span>
  </div>
  <div class="box">
   <button>发送验证码</button>
  </div>
  <div class="note Box">
    <span>短信验证码：</span><input type="text"><span class="yan"></span>
  </div>
  <div class="password Box">
    <span>密码：</span><input type="text"><span class="yan"></span>
  </div>
  <div class="affirm Box">
    <span>确认密码：</span><input type="text"><span class="yan"></span>
  </div>
  <div class=" Box">
    <a href="#" class='register'>点击注册</a>
  </div>
</div>
<script>


    function get(element,reg,text) {
      element.addEventListener('blur',function () {
        var content = this.value;
        if(reg.test(content)){
          element.nextElementSibling.innerText ='正确';
          element.nextElementSibling.style.color ='green';
        }else {
          element.nextElementSibling.innerText =text;
          element.nextElementSibling.style.color ='red';
        }
        })
    };
   get(document.querySelector(".mailBox input"),/^\w+@\w+(\.\w+)+$/,'请输入正确的邮箱');
   get(userInput =document.querySelector(".userName input"),/[a-z]{6,12}|[\u4e00-\u9fa5]{6,12}/,'请输入6-12个字符')
   get(document.querySelector(".number input"),/^1[3-9]\d{9}$/,'手机号码输入有误');
   get(document.querySelector(".note input"),/^\d{6}$/,'验证码不正确');
   get(document.querySelector(".password input"),/\w{4,12}\d{6,12}/,'请输入6-12个字母和数字');
    get(document.querySelector(".affirm input"),/\w{4,12}\d{6,12}/,'密码输入有误');


    var button =document.querySelector("button");
    button.addEventListener('click',function () {
    var count =10;
    var timeId = setInterval(function () {
      count--;
      button.innerText = count + '秒后重新发送';
      if(count < 0){
        clearInterval(timeId);
        button.innerText = '发送验证码';
      }
    },1000)
  });

</script>
</body>
</html>