html导航栏+下拉菜单+表单验证

2024-03-17 13:26:02
开发
22

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap-5.3.3/dist/css/bootstrap-grid.min.css">
    <title>实验一</title>
    <style>
        #nav {
            background-color: #5D4B33;
            height: 50px;
        }
        #nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }
        #nav ul li {
            width: 134px;
            line-height: 50px;
        }
        #nav ul li a {
            text-decoration: none;
            color: #000;
        }
        .dropdown li {
            margin: 0;
            padding: 0;
            line-height: 40px;
            text-align: left;
        }
        #nav .dropdown {
            display: none;
        }
        #nav ul li:hover .dropdown {
            display: block;
        }

        /* 表单样式 */
        #register_form {
            margin: 0 auto;
            width: 300px;
            padding: 20px;
            margin-top: 50px;
        }
        #register_form label {
            display: block;
            margin-bottom: 10px;
        }
        #register_form input {
            width: 100%;
            padding: 10px;
        }
        #register_form input[type="submit"] {
            background-color: #5D4B33;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        /* svg图像样式 */
        img {
            height: 50px;
        }
        .xiala {
            height: 12px;
        }

        /* 错误信息样式 */
        .error {
            color: red;
        }
    </style>
<script>
    function validateForm() {
      var username = document.forms["registration_form"]["username"].value;
      var email = document.forms["registration_form"]["email"].value;
      var password = document.forms["registration_form"]["password"].value;
      var confirmPassword = document.forms["registration_form"]["confirm_password"].value;
  
      var usernameError = document.getElementById("usernameError");
      var emailError = document.getElementById("emailError");
      var passwordError = document.getElementById("passwordError");
      var confirmPasswordError = document.getElementById("confirmPasswordError");
  
      var isValid = true;
  
      // 检查用户名
      if (username == "") {
        usernameError.textContent = "用户名不能为空";
        isValid = false;
      } else {
        usernameError.textContent = "";
      }
  
      // 检查邮箱
      if (email == "") {
        emailError.textContent = "邮箱不能为空";
        isValid = false;
      } else {
        emailError.textContent = "";
      }
  
      // 检查密码
      if (password == "") {
        passwordError.textContent = "密码不能为空";
        isValid = false;
      } else if (password.length < 6) {
        passwordError.textContent = "密码长度至少为6个字符";
        isValid = false;
      } else {
        passwordError.textContent = "";
      }
  
      // 检查确认密码
      if (confirmPassword != password) {
        confirmPasswordError.textContent = "两次输入的密码不一致";
        isValid = false;
      } else {
        confirmPasswordError.textContent = "";
      }
  
      return isValid;
    }
  </script>
</head>
<body>
    
    <div id="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">商品分类
                <img class="xiala" src="./icon_cvqaunv8bku/xiala-.svg" alt="">
            </a>
                <ul class="dropdown">
                    <li><a href="#">下拉选项1</a></li>
                    <li><a href="#">下拉选项1</a></li>
                    <li><a href="#">下拉选项1</a></li>
                </ul>
            </li>
            <li><a href="#">热销</a></li>
            <li><a href="#">新品</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">登录</a></li>
            <li><a href="#">
                <img src="./icon_cvqaunv8bku/sousuo.svg" alt="">
            </a></li>
            <li><a href="#">
                <img src="./icon_cvqaunv8bku/gouwuche.svg" alt="">
            </a></li>
        </ul>
    </div>
    <div id="register_form">
        <form name="registration_form" onsubmit="return validateForm()" method="post" action="#">
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username">
            <span class="error" id="usernameError"></span><br><br>
          
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email">
            <span class="error" id="emailError"></span><br><br>
          
            <label for="password">密码：</label>
            <input type="password" id="password" name="password">
            <span class="error" id="passwordError"></span><br><br>
          
            <label for="confirm_password">确认密码：</label>
            <input type="password" id="confirm_password" name="confirm_password">
            <span class="error" id="confirmPasswordError"></span><br><br>
          
            <input type="submit" value="注册">
          </form>
          
    </div>
</body>
</html>

原文地址:https://blog.csdn.net/qq_63432403/article/details/136670951 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1769233710068142080.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

html导航栏+下拉菜单+表单验证

相关推荐

最近更新

热门阅读