Use native javascript to create common form verification-more sharp use of dom object_javascript skills

Use native javascript to create common form verification-more sharp use of dom objects, learn javascript friends can refer. First, let's take a look at the effect. Nothing special!

The called code is quite simple. You do not need to create other labels or span labels. The script will automatically generate the following code:

The Code is as follows:

Next, let's take a look at the checkResult function. The checkCondition parameter indicates the judgment condition. When the condition is true, the prompt information 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. Therefore, the input parameter value is the current input ID "txt1". The last parameter is the displayed text, you don't have to worry about this.

The Code is as follows:

// The prompt information cannot be displayed for verification.
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 = '';
}
}

Well, let's take a look at the function "createShowElement (currentId, elementId, style, showMsg, tagName)": currentId is the ID of the current tag; elementId is the ID of the created tag; style is the style of the created tag, which can be written in the style format; showMsg is not mentioned; tagName is the name of the created tag, such as label or span.

The Code is as follows:

// Create a dom for displaying the prompt information
Function 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 );
}

It is only for communication. You are welcome to give some advice and are eager for valuable comments. I personally think that even a simple script verification program should follow the object-oriented idea as much as possible, and pursue a coordinated point in scalability and efficiency, without affecting the efficiency, at the same time, it is not difficult for any program we write to have higher scalability, but it is often ignored by many junior programmers.