快捷導(dǎo)航

使用原生javascript創(chuàng)建通用表單驗(yàn)證——更鋒利的使用dom對(duì)象

更新時(shí)間：2011年09月13日 21:17:10 作者：

使用原生javascript創(chuàng)建通用表單驗(yàn)證——更鋒利的使用dom對(duì)象，學(xué)習(xí)js的朋友可以參考下。

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

調(diào)用的代碼呢，則是相當(dāng)簡(jiǎn)單，不需要?jiǎng)?chuàng)建其他的Label或者span標(biāo)簽，腳本將自動(dòng)生成：

 
<input type="text" id="txt1" onkeyup="checkResult(this.value == '', 'txt1', ' *這里不能為空喔！')" /> 

接下來我們看下這個(gè)checkResult這個(gè)函數(shù)，checkCondition參數(shù)表示判斷條件，當(dāng)條件為true時(shí)顯示提示信息；showAfterId參數(shù)為創(chuàng)建的顯示提示信息的標(biāo)簽之前的元素ID，在這里我們?cè)趇nput后面創(chuàng)建一個(gè)span來顯示提示信息，因而傳入的參數(shù)值為當(dāng)前input的ID“txt1”；最后一個(gè)參數(shù)為顯示的文字，這個(gè)就不用啰嗦了。

復(fù)制代碼代碼如下:

 
//驗(yàn)證不能為空展示提示信息 
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 = ''; 
} 
} 

好，最后我們來看這個(gè)“createShowElement(currentId, elementId, style, showMsg, tagName)”函數(shù)：currentId即當(dāng)前標(biāo)簽的ID；elementId為創(chuàng)建的標(biāo)簽的ID；style為創(chuàng)建的標(biāo)簽的樣式，按照樣式的寫法即可；showMsg不講了；tagName為創(chuàng)建的標(biāo)簽名，如label或者span等。

復(fù)制代碼代碼如下:

 
//創(chuàng)建展示提示信息的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); 
} 

僅供交流，歡迎大家提出指點(diǎn)，渴望寶貴的意見。個(gè)人覺得，即使是寫簡(jiǎn)單的腳本驗(yàn)證程序，也應(yīng)該盡量遵循面向?qū)ο蟮乃枷?，并且在可擴(kuò)展與效率上追尋一個(gè)協(xié)調(diào)的點(diǎn)，既不影響效率，同時(shí)讓我們寫的任何程序具有更高的可擴(kuò)展性，這點(diǎn)思路其實(shí)不難，但是經(jīng)常被很多初級(jí)程序員忽略。

您可能感興趣的文章: