Use native javascript to create universal form validation - sharper use of dom objects_javascript skills

First of all, let’s take a look at the effect. It’s nothing special, haha!

The code called by

is quite simple. There is no need to create other Label or span tags. The script will be automatically generated:

Copy Code The code is as follows:

Next, let’s take a look at the checkResult function. The checkCondition parameter represents the judgment condition. When the condition is true, the prompt message is displayed; The showAfterId parameter is the element ID before the created label that displays the prompt information. Here we create a span after the input to display the prompt information, so the parameter value passed in is the ID "txt1" of the current input; the last parameter is displayed Text, there is no need to be verbose about this.

Copy code The code is as follows:

//Verification cannot be empty and display prompt 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 = '';
}
}

Okay, finally let’s look at this "createShowElement(currentId, elementId, style, showMsg, tagName)" function: currentId is the ID of the current tag; elementId is the ID of the created tag; style is the style of the created tag, just follow the writing method of the style; showMsg will not be discussed ;tagName is the name of the created tag, such as label or span, etc.

Copy code The code is as follows:

//Create a dom
function that displays prompt information 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);
}

Only For communication, everyone is welcome to give advice and eager to provide valuable opinions. Personally, I feel that even when writing a simple script verification program, we should try our best to follow object-oriented thinking and pursue a harmonious point in scalability and efficiency, which will not affect efficiency, and at the same time make any program we write more efficient. Scalability, this idea is actually not difficult, but it is often ignored by many junior programmers.