Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Registration Form</title>
    <style>
      /* CSS */
      body {
        font-family: Arial, sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f2f5;
      }

      form {
        background-color: #fff;
        padding: 20px 40px;
        border-radius: 8px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 400px;
      }

      label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        color: #333;
      }

      input[type="text"],
      input[type="password"],
      input[type="date"],
      input[type="file"] {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box;
        font-size: 14px;
      }

      button[type="submit"] {
        width: 100%;
        padding: 10px;
        background-color: #4caf50;
        color: white;
        font-size: 16px;
        font-weight: bold;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        /* Xoá bỏ cái margin đi nhé*/
      }
      /* thêm cái thẻ vào thêm thuộc tính là display flex */
      #container {
        display: flex;
        gap: 10px;
      }

      button[type="submit"]:hover {
        background-color: #45a049;
      }

      input:invalid {
        border-color: #e74c3c;
      }

      input[type="text"]:focus,
      input[type="password"]:focus,
      input[type="date"]:focus,
      input[type="file"]:focus {
        border-color: #4caf50;
        box-shadow: 0px 0px 5px rgba(76, 175, 80, 0.5);
        outline: none;
      }
    </style>
  </head>
  <body>
    <form id="registrationForm" onsubmit="return validateForm()">
      <h1>Đăng kí thành viên</h1>
      <label for="fullName">Họ và tên:</label>
      <input type="text" id="fullName" name="fullName" required />

      <label for="password">Mật khẩu:</label>
      <input type="password" id="password" name="password" required />

      <label for="confirmPassword">Khẳng định mật khẩu:</label>
      <input
        type="password"
        id="confirmPassword"
        name="confirmPassword"
        required
      />

      <label for="birthDate">Ngày tháng năm sinh:</label>
      <input type="date" id="birthDate" name="birthDate" required />

      <label for="phoneNumber">Số điện thoại:</label>
      <input type="text" id="phoneNumber" name="phoneNumber" required />

      <label for="imagePath">Đường dẫn ảnh:</label>
      <input type="file" id="imagePath" name="imagePath" accept="image/*" />

      <!-- thêm thẻ div để css -->
      <div id="container">
        <button type="submit">Đăng ký</button>
        <button type="submit" onclick="resetForm()">Hủy Bỏ</button>
      </div>
    </form>

    <script>
      // JavaScript
      function validateForm() {
        const fullName = document.getElementById("fullName").value;
        const password = document.getElementById("password").value;
        const confirmPassword =
          document.getElementById("confirmPassword").value;
        const phoneNumber = document.getElementById("phoneNumber").value;
        const imagePath = document.getElementById("imagePath").value;

        // 1. Họ và tên không được dùng chữ số
        if (/\d/.test(fullName)) {
          alert("Họ và tên không được chứa chữ số.");
          return false;
        }

        // 2. Mật khẩu phải có ít nhất 1 chữ hoa, 1 chữ thường, 1 ký tự đặc biệt và ít nhất 8 ký tự
        const passwordPattern = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\W).{8,}$/;
        if (!passwordPattern.test(password)) {
          alert(
            "Mật khẩu phải có ít nhất 1 chữ hoa, 1 chữ thường, 1 ký tự đặc biệt và ít nhất 8 ký tự."
          );
          return false;
        }

        // 3. Khẳng định mật khẩu và mật khẩu phải trùng nhau
        if (password !== confirmPassword) {
          alert("Mật khẩu và xác nhận mật khẩu phải trùng nhau.");
          return false;
        }

        // 5. Số điện thoại không được dùng ký tự và ký tự đặc biệt ngoại trừ dấu ()
        const phonePattern = /^[\d()]+$/;
        if (!phonePattern.test(phoneNumber)) {
          alert(
            "Số điện thoại không được chứa ký tự hoặc ký tự đặc biệt ngoại trừ dấu ()."
          );
          return false;
        }

        // 6. Hiển thị tên file ảnh nếu có
        if (imagePath) {
          const fileName = imagePath.split("\\").pop();
          alert("Tên file ảnh: " + fileName);
        }

        return true; // Dữ liệu hợp lệ
      }
      // 7. Nút huỷ bỏ
      function resetForm() {
        // Xóa toàn bộ dữ liệu trong form
        document.getElementById("registrationForm").reset();
        // Xóa tên file hiển thị
        document.getElementById("fileNameDisplay").textContent = "";
      }
    </script>
  </body>
</html>
Editor is loading...