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"],
      input[list] {
        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;
      }

      #container {
        display: flex;
        gap: 10px;
      }

      button[type="submit"]:hover {
        background-color: #45a049;
      }
    </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="interests">Sở thích:</label>
      <input list="interestList" id="interests" name="interests" />
      <datalist id="interestList">
        <option value="Điện ảnh"></option>
        <option value="Thể thao"></option>
        <option value="Du lịch"></option>
        <option value="Games"></option>
      </datalist>

      <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;

        // 1. Họ và tên không được chứa 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, 1 chữ số và ít nhất 8 ký tự
        const passwordPattern = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\W)(?=.*\d).{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, 1 chữ số và có tối thiểu 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 chứa 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 chữ cái hoặc ký tự đặc biệt ngoại trừ dấu ()-."
          );
          return false;
        }

        return true; // Dữ liệu hợp lệ
      }

      function resetForm() {
        document.getElementById("registrationForm").reset();
      }
    </script>
  </body>
</html>
Editor is loading...