Input Validator đơn giản bằng HTML, CSS và Javascript

Input Validator đơn giản bằng HTML, CSS và Javascript

Input Validator đơn giản bằng HTML, CSS và Javascript

Trong phần giới thiệu này, chúng ta sẽ tìm hiểu cách tạo một input validator đơn giản bằng HTML, CSS và JavaScript. Input validator là một công cụ quan trọng giúp kiểm tra và xác nhận tính hợp lệ của dữ liệu mà người dùng nhập vào trên trang web. Chúng ta sẽ khám phá cách sử dụng các ngôn ngữ lập trình cơ bản để tạo ra một công cụ kiểm tra dữ liệu dễ sử dụng và hữu ích.

Trong hướng dẫn này, chúng ta sẽ bắt đầu bằng cách xây dựng giao diện HTML cho các trường nhập liệu cùng với các thông báo lỗi. Sau đó, chúng ta sẽ sử dụng CSS để tạo giao diện thân thiện và dễ nhìn. Cuối cùng, bằng cách sử dụng JavaScript, chúng ta sẽ tạo logic kiểm tra dữ liệu và hiển thị thông báo lỗi một cách động.

Dù bạn là người mới bắt đầu hay đã có kinh nghiệm, hướng dẫn này sẽ giúp bạn hiểu rõ hơn về cách xây dựng input validator đơn giản mà hiệu quả.

Hãy cùng bắt đầu khám phá cách tạo công cụ kiểm tra dữ liệu và nâng cao khả năng phát triển trang web của bạn!


Bước 1: Thêm HTML


<div class="container">
      <div class="inputBox">
        <input id="input" type="password" required oninput="validator(event)" />
        <label for="input">Password</label>
        <div class="eye">
          <span class="hide"><i class="fa-regular fa-eye-slash"></i></span>
          <span class="show"><i class="fa-regular fa-eye"></i></span>
        </div>
        <div class="messageBox">
          <span class="upperCaseMessage">
            <i class="fa-regular fa-circle-xmark"></i>
            <i class="fa-regular fa-circle-check"></i>
            Chứa ít nhất một ký tự in hoa
          </span>
          <span class="digitMessage">
            <i class="fa-regular fa-circle-xmark"></i>
            <i class="fa-regular fa-circle-check"></i>
            Chứa ít nhất một chữ số
          </span>
          <span class="specialCharMessage">
            <i class="fa-regular fa-circle-xmark"></i>
            <i class="fa-regular fa-circle-check"></i>
            Chứa ít nhất một ký tự đặt biệt
          </span>
          <span class="lengthMessage">
            <i class="fa-regular fa-circle-xmark"></i>
            <i class="fa-regular fa-circle-check"></i>
            Có độ dài từ 8 đến 20 ký tự
          </span>
        </div>
      </div>
    </div>

Bước 2: Thêm CSS


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgb(31, 30, 30);
}

.inputBox {
    position: relative;
    width: 300px;
}

#input {
    width: 100%;
    color: rgba(255, 255, 255, 0.7);
    outline: none;
    font-size: 1em;
    border-radius: 8px;
    padding: 18px 18px 12px 18px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background-color: transparent;
    transition: all 0.5s;
}

.inputBox label {
    position: absolute;
    left: 0;
    font-size: 1em;
    padding: 16px 18px;
    color: rgba(255, 255, 255, 0.25);
    pointer-events: none;
    transition: all 0.5s;
    text-transform: uppercase;
}

.inputBox input:focus~label,
.inputBox input:valid~label {
    color: rgba(0, 0, 0, 0.8);
    padding: 2px 6px;
    font-size: 12px;
    transform: translate(10px, -7px);
    background-color: #b3ffae;
    border-radius: 2px;
}

.inputBox input:focus {
    border: 1px solid red
}

.eye {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    font-size: 16px;
    color: #b3ffae;
}

.eye .hide,
.eye .show {
    display: none;
    cursor: pointer;
}

.messageBox {
    position: absolute;
    top: 60px;
    display: none;
    flex-direction: column;
    gap: 8px;
    width: 300px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.messageBox span {
    padding: 2px 0;
    font-size: 14px;
    color: #ff6969;
    transition: all 0.3s;
}

.messageBox span i {
    margin-right: 8px;
}

.messageBox span.valid {
    color: #b3ffae;
}

.messageBox span.valid i.fa-circle-xmark {
    display: none;
}

.messageBox span.valid i.fa-circle-check {
    display: inline-block;
}

.messageBox span i.fa-circle-xmark {
    display: inline-block;
}

.messageBox span i.fa-circle-check {
    display: none;
}

Bước 3: Thêm Javascript


const input = document.querySelector("#input");
const togglePassword = document.querySelectorAll(".eye span");
const showBtn = document.querySelector(".eye .show");
const hideBtn = document.querySelector(".eye .hide");
const messageBox = document.querySelector(".messageBox");
const upperCaseMessage = document.querySelector(".upperCaseMessage");
const digitMessage = document.querySelector(".digitMessage");
const specialCharMessage = document.querySelector(".specialCharMessage");
const lengthMessage = document.querySelector(".lengthMessage");

function validator(event) {
  if (input.value) {
    // Show message box
    messageBox.style.display = "flex";

    // Show show button
    showBtn.style.display = "block";

    togglePassword.forEach((item) => {
      item.onclick = () => {
        if (input.type === "password") {
          input.setAttribute("type", "text");
          showBtn.style.display = "none";
          hideBtn.style.display = "block";
        } else {
          input.setAttribute("type", "password");
          showBtn.style.display = "block";
          hideBtn.style.display = "none";
        }
      };
    });

    // Logic
    const hasUpperCase = /[A-Z]/.test(input.value);
    const hasDigit = /[0-9]/.test(input.value);
    const hasSpecialChar = /[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/.test(input.value);
    const isValidLength = input.value.length >= 8 && input.value.length <= 20;

    hasUpperCase
      ? upperCaseMessage.classList.add("valid")
      : upperCaseMessage.classList.remove("valid");
    hasDigit
      ? digitMessage.classList.add("valid")
      : digitMessage.classList.remove("valid");
    hasSpecialChar
      ? specialCharMessage.classList.add("valid")
      : specialCharMessage.classList.remove("valid");
    isValidLength
      ? lengthMessage.classList.add("valid")
      : lengthMessage.classList.remove("valid");
  } else {
    // Hide message box
    messageBox.style.display = "none";

    // Hide show/hide button
    showBtn.style.display = "none";
    hideBtn.style.display = "none";
  }
}

Full tutorial:


Hoàn thành

Kết thúc hướng dẫn này, bạn đã nắm vững cách tạo một input validator đơn giản bằng HTML, CSS và JavaScript. Công cụ này sẽ giúp bạn kiểm tra và đảm bảo tính hợp lệ của dữ liệu nhập vào trang web, tạo nên trải nghiệm người dùng mượt mà và tránh những lỗi không mong muốn.

Bằng cách áp dụng những kiến thức bạn đã học, bạn có thể tạo ra những trang web có khả năng xử lý dữ liệu đáng tin cậy và tương tác hiệu quả hơn. Việc thực hành với các công cụ và ngôn ngữ lập trình cơ bản như HTML, CSS và JavaScript sẽ giúp bạn nâng cao kỹ năng và trở thành một nhà phát triển web tự tin hơn.

Hãy tự tin bước vào việc thử nghiệm và tùy chỉnh input validator theo ý muốn của bạn, để làm cho trang web của bạn thêm phần chuyên nghiệp và tiện lợi cho người dùng.

Chúc bạn thành công trong hành trình phát triển và tối ưu hóa trang web của mình!

No comments:

Powered by Blogger.