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

byHiju Blog -
0


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!

Các bài viết liên quan:






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!


Tags

Hiju Blog

I'm HiJu

You may like these posts

Post a Comment

Previous Post Next Post