注册页面，没有完成验证码发送

最新推荐文章于 2024-08-18 10:54:05 发布

耕的码田

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量74

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_73480865/article/details/132556002

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
    body {
      background-color: #f0f2f5;
      font-family: Arial, sans-serif;
    }
    form {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin: 50px auto;
      max-width: 500px;
      padding: 30px;
    }
    h1 {
      color: #1877f2;
      font-size: 28px;
      font-weight: 600;
      margin-bottom: 20px;
      text-align: center;
    }
    input[type="text"], input[type="email"], input[type="password"] {
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 16px;
      margin-bottom: 20px;
      padding: 10px;
      width: 100%;
    }
    input[type="submit"] {
      background-color: #1877f2;
      border: none;
      border-radius: 4px;
      color: #fff;
      cursor: pointer;
      font-size: 16px;
      font-weight: 600;
      margin-top: 20px;
      padding: 10px;
      width: 100%;
    }
    input[type="submit"]:hover {
      background-color: #166fe5;
    }
    p {
      color: #999;
      font-size: 14px;
      margin-top: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
<h2>注册页面</h2>
<form role="form" action="/login" method="post" onsubmit="return validateForm()">
  请输入用户名:<input type="text" name="name" id="name"><br>
    仅限qq邮箱：<input type="text" placeholder="请输入你的邮箱地址" size="17" id="email" onblur="judgeemail()"><br>
    验证码：<input type="text" id="verify" onblur="judgeverify()" >
    <button id="myButton" onclick="disableButton(this)">发验证码</button>
    <span id="countdown"></span><br>
  请输入密码：<input type="text" name="password" id="password"><br>
  确认密码：<input type="password" title="确认密码" size="12" id="againpass" onblur="validatePassword() "><br>
    <span id="passwordError"></span>
  <input type="submit" name="sign" value="提交">
</form>


<script>
<!--输入框不能为空-->
function validateForm() {
    var name = document.getElementById('name').value;
    var email = document.getElementById('email').value;
    var verify = document.getElementById('verify').value;
    var password = document.getElementById('password').value;
    var againpass = document.getElementById('againpass').value;

    if (name == "" || email == "" || verify == "" || password == "" || againpass == "") {
        alert("所有的输入框都必须填写");
        return false;
    }
    return true;
}
<!--判断用户名-->
function judgename(){
            var name=document.getElementById("name");
            var nameerror=document.getElementById("nameerror");

                var pattern=/^[A-Za-z0-9]{6,10}$/;
                if(!pattern.test(name.value)){
                    nameerror.innerHTML="用户格式不正确！";

                }else{
                    nameerror.innerHTML="";
                    usernameok=true;
                }
            }

<!--判断密码-->
 function validatePassword() {
  var password = document.getElementById("password").value;
  var confirmPassword = document.getElementById("againpass").value;
  var errorSpan = document.getElementById("passwordError");

  if (password != confirmPassword) {
    errorSpan.innerHTML = "密码不一致";
  } else {
    errorSpan.innerHTML = "";
  }
}


<!--  判断邮箱-->
 function judgeemail(){
    var email = document.getElementById('email').value;
    var emailReg = /^[1-9]\d{4,10}@qq\.com$/;  // QQ邮箱的正则表达式

    if (!emailReg.test(email)) {
        alert("请输入有效的QQ邮箱地址");
        return false;
    }
    return true;
}

<!--1分钟后关闭按钮-->
function disableButton(button) {
 button.disabled = true; // 禁用按钮
  var countdownElement = document.getElementById("countdown");
  var countdown = 60; // 设置倒计时时间为60秒

  // 更新倒计时显示，并每秒更新一次
  countdownElement.innerText = countdown;
  var countdownInterval = setInterval(function() {
    countdown--;
    countdownElement.innerText = countdown;

    // 当倒计时结束时，启用按钮并清除倒计时定时器
    if (countdown <= 0) {
      button.disabled = false;
      clearInterval(countdownInterval);
      countdownElement.innerText = "";
    }
  }, 1000);
}
</script>
</body>
</html>

耕的码田

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
注册页面，没有完成验证码发送

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>注册</title> <style> body { background-color: #f0f2f5; font-family: Arial, sans-serif; } form { backgrou
复制链接

扫一扫