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:
Copy codeThe Code is as follows:
<Input type = "text" id = "txt1" onkeyup = "checkResult (this. value ='', 'txt1', '* cannot be blank here! ') "/>
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.
Copy codeThe 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.
Copy codeThe 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.