기본 자바스크립트를 사용하여 범용 형식 유효성 검사 생성 - dom object_javascript 기술을 더욱 선명하게 사용

우선 효과부터 살펴보죠. 뭐 특별한 건 없습니다. 하하!

에 의해 호출되는 코드는 매우 간단합니다. 다른 Label 또는span 태그를 생성할 필요가 없습니다.

코드 복사 코드는 다음과 같습니다.

다음으로 checkResult 함수를 살펴보겠습니다. checkCondition 매개변수는 판단 조건을 나타냅니다. 조건이 true이면 프롬프트 메시지가 표시됩니다. showAfterId 매개변수는 프롬프트 정보를 표시하는 생성된 레이블 앞의 요소 ID입니다. 여기서는 프롬프트 정보를 표시하기 위해 입력 후 범위를 생성하므로 전달된 매개변수 값이 ID입니다. 현재 입력의 "txt1"; 마지막 매개변수가 텍스트로 표시됩니다. 이에 대해 장황하게 설명할 필요가 없습니다.

코드 복사 코드는 다음과 같습니다.

//인증은 비워둘 수 없으며 프롬프트를 표시합니다. information
function checkResult(checkCondition, showAfterId, showMsg) {
var showLabelId = showAfterId "showMsg";
if (checkCondition) {
if (document.getElementById(showLabelId)) {
document .getElementById(showLabelId ).innerHTML = showMsg;
} else {
createShowElement(showAfterId, showLabelId, "color:red", showMsg, 'span')
}
} else if(! checkCondition) {
if (document.getElementById(showLabelId))
document.getElementById(showLabelId).innerHTML = '';
}
}

자, 드디어 이 "createShowElement(currentId, elementId, style, showMsg, tagName)" 함수를 살펴보겠습니다. currentId는 현재 태그의 ID이고, elementId는 생성된 태그의 ID입니다. showMsg 작성 방법은 논의하지 않습니다. tagName은 생성된 태그의 이름(예: label 또는span)입니다.

코드 복사 코드는 다음과 같습니다.

//dom 생성
함수 프롬프트 정보를 표시합니다. createShowElement(currentId, elementId, style, showMsg, tagName) {
if (!tagName) tagName = 'label'
var currentDom = document.getElementById(currentId)
var showMsgDom = document.createElement( tagName)
//showMsgDom.setAttribute("style", "color:" textColor ";");
if (style)
showMsgDom.setAttribute("style", style) ;
showMsgDom.setAttribute("id", elementId);
showMsgDom.innerHTML = showMsg;
currentDom.parentNode.insertBefore(showMsgDom, currentDom.nextSibling)

소통을 위해서만 누구나 조언을 제공하고 귀중한 의견을 제공하기를 열망합니다. 개인적으로는 간단한 스크립트 검증 프로그램을 작성할 때에도 객체지향적 사고를 따르며 효율성에 영향을 주지 않는 확장성과 효율성의 조화로운 지점을 추구하면서 동시에 우리가 원하는 프로그램을 만들도록 노력해야 한다고 생각합니다. 더 효율적으로 작성하세요. 이 아이디어는 실제로 어렵지 않지만 많은 후배 프로그래머들이 종종 무시합니다.