ネイティブ JavaScript を使用してユニバーサル フォーム検証を作成 - dom object_javascript スキルをより効果的に使用

まず、効果を見てみましょう。特別なことではありません（笑）。

によって呼び出されるコードは非常に単純です。他のラベルまたはスパン タグを作成する必要はありません。スクリプトは自動的に生成されます。 >コードをコピー

コードは次のとおりです:

次に、checkResult関数を見てみましょう。checkConditionパラメータは判定条件を表します。条件が true の場合、プロンプト メッセージが表示されます。 showAfterId パラメータは、プロンプト情報を表示する作成されたラベルの前の要素 ID です。ここでは、プロンプト情報を表示するためのスパンを作成します。そのため、渡されるパラメータ値は ID です。現在の入力の「txt1」; 最後のパラメータが表示されます。これについては詳しく説明する必要はありません。

コードをコピー

コードは次のとおりです: //検証を空にしてプロンプトを表示することはできませんinformation function checkResult(checkCondition, showAfterId, showMsg) { var showLabelId = showAfterId "showMsg";

if (checkCondition) {

if (document.getElementById(showLabelId)) {
ドキュメント.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 は作成されたタグのスタイルです。スタイルの記述方法については説明しません。tagName は、ラベルやスパンなどの作成されたタグの名前です。




コードをコピーします

コードは次のとおりです:

// dom 関数を作成しますプロンプト情報を表示します。 createShowElement(currentId, elementId, style, showMsg, tagName) { if (!tagName) tagName = 'label'; var currentDom = document.getElementById(currentId); 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);
コミュニケーションのみを目的として、誰でもアドバイスや貴重な意見を提供することを歓迎します。個人的には、単純なスクリプト検証プログラムを作成する場合でも、オブジェクト指向の考え方に従い、効率に影響を与えないスケーラビリティと効率の調和点を追求し、同時にプログラムを作成する必要があると感じています。スケーラビリティの向上、このアイデアは実際には難しいことではありませんが、多くの若手プログラマーによって無視されることがよくあります。