자바스크립트로 실시간으로 비어있는지 판단하는 방법
- PHPz원래의
- 2023-04-26 10:32:391054검색
웹 개발에서 양식은 비즈니스 로직의 중요한 구성 요소 중 하나이며 양식 확인은 기본적인 보안 고려 사항입니다. 양식에서는 입력란의 검증이 가장 기본이자 필요하며, 입력란의 내용이 비어 있는지 판단하는 것이 가장 일반적인 검증이다. 여기서는 비어있지 않은지 실시간 판단을 구현하기 위한 자바스크립트의 방법을 소개하겠습니다.
- 입력 상자 실시간 모니터링
비어 있지 않다는 실시간 판단 효과를 얻으려면 입력 상자를 자바스크립트를 통해 실시간으로 모니터링해야 합니다. 입력의 oninput 이벤트를 수신하여 입력 상자의 텍스트를 실시간으로 업데이트할 수 있습니다.
<input type="text" id="input" oninput="checkEmpty()">
위 코드에서는 oninput 이벤트를 입력에 추가합니다. 이벤트가 트리거되면 checkEmpty라는 함수가 호출되어 입력에 값이 있는지 확인합니다.
- 입력 상자의 값 확인
입력 상자를 실시간으로 모니터링한 후 입력 상자에 값이 있는지 확인하고 입력 상자의 스타일이나 프롬프트 정보를 변경하는 checkEmpty 함수를 작성해야 합니다. 값이 있는지 여부에 따라 결정됩니다.
function checkEmpty() {
var inputEl = document.getElementById("input");
if (inputEl.value.trim() == "") {
inputEl.style.borderColor = "red";
inputEl.nextElementSibling.innerHTML = "此项不能为空";
} else {
inputEl.style.borderColor = "green";
inputEl.nextElementSibling.innerHTML = "";
}
}
위 코드에서는 먼저 입력 상자의 DOM 개체를 얻은 다음 입력 상자의 값이 비어 있는지 여부를 확인하여 입력 상자의 스타일이나 프롬프트 정보를 변경합니다. 입력 상자가 비어 있으면 입력 상자의 테두리 색상을 빨간색으로 설정하고 입력 상자가 비어 있지 않으면 입력 상자 뒤에 "이 항목은 비워둘 수 없습니다"라는 프롬프트 메시지를 추가하고 테두리 색상을 녹색으로 설정합니다. 을 누르고 프롬프트 정보를 지웁니다.
- 모든 입력 상자에 유효성 검사 함수 적용
마지막으로 유효성 검사가 필요한 모든 입력 상자에 checkEmpty 함수를 적용해야 합니다. 실제 개발에서는 확인해야 할 입력 상자를 클래스로 표시한 다음 document.getElementsByClassName() 메서드를 사용하여 이 클래스로 표시된 모든 입력 상자를 얻은 다음 반복하여 checkEmpty 함수를 다시 호출하는 경우가 많습니다.
var inputs = document.getElementsByClassName("required");
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener("input", checkEmpty);
}
위 코드에서는 먼저 document.getElementsByClassName("required") 메서드를 사용하여 확인해야 하는 모든 입력 상자를 얻은 다음 루프 순회를 사용하여 모든 입력 상자에 대한 oninput 이벤트를 추가합니다. 트리거되면 확인을 위해 checkEmpty 함수가 실행됩니다.
요약:
위의 세 단계를 통해 입력 상자가 비어 있지 않은지 실시간으로 간단한 JavaScript 기반 확인을 구현할 수 있습니다. 물론 실제 개발에서는 더 복잡한 양식 유효성 검사 요구 사항이 발생할 수 있습니다. 위의 예를 기반으로 비즈니스 로직을 기반으로 적절하게 개선할 수 있습니다.
위 내용은 자바스크립트로 실시간으로 비어있는지 판단하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!