使用原生javascript建立通用表單驗證——更鋒利的使用dom對象

首先看下效果，沒什麼特別，呵呵！

調用的代碼呢，則是相當簡單，不需要建立其他的Label或者span標籤，指令碼將自動產生：

複製代碼 代碼如下:<input type="text" id="txt1" onkeyup="checkResult(this.value == '', 'txt1', ' *這裡不可為空喔！')" />

接下來我們看下這個checkResult這個函數，checkCondition參數表示判斷條件，當條件為true時顯示提示資訊；showAfterId參數為建立的顯示提示資訊的標籤之前的元素ID，在這裡我們在input後面建立一個span來顯示提示資訊，因而 傳入的參數值為當前input的ID“txt1”；最後一個參數為顯示的文字，這個就不用囉嗦了。 複製代碼 代碼如下://驗證不可為空展示提示資訊
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；style為建立的標籤的樣式，按照樣式的寫法即可；showMsg不講了；tagName為建立的標籤名，如label或者span等。 複製代碼 代碼如下://建立展示提示資訊的dom
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);
}

僅供交流，歡迎大家提出指點，渴望寶貴的意見。個人覺得，即使是寫簡單的指令碼驗證程式，也應該盡量遵循物件導向的思想，並且在可擴充與效率上追尋一個協調的點，既不影響效率，同時讓我們寫的任何程式具有更高的可擴充性，這點思路其實不難，但是經常被很多初級程式員忽略。