JavaScript フォームと空でない検証 validation_javascript スキル

推奨読書: JavaScript フォーム検証の長さ

JavaScript フォーム検証 - フォーム送信

JavaScript フォーム検証 - 正規表現の最初の紹介

JavaScript フォームの検証 - 正規表現を明らかにする

JavaScript を使用すると、HTML フォームの入力データをサーバーに送信する前に検証できます。

フォームを送信する前にデータの合法性を確認してください

フォーム内のデータを確認したい場合は、getElementById() を使用して Web ページ上の任意の要素にアクセスできます

各フォームフィールドには、フォームデータを検証する任意の関数に渡すことができるフォームオブジェクトがあります

<input id="zipcode" name="zipcode" type="text" size="5" onclick="showIt(this.form)"/>
function showIt(thisForm)
{
alert(thisForm["zipcode"].value);
//通过form对象的name属性，取得元素的值
}

name 属性または getElementById() メソッドを使用して要素を取得できます

フォーム データをチェックするタイミングは、処理する適切なユーザー入力イベントの選択によって異なります。

言い換えれば、ユーザーがデータを入力するとすぐにデータが検証されます。

ユーザーがデータを入力する順序は次のとおりです:

入力フィールドを選択

フィールドにデータを入力します

このエリアを離れ、次のターゲットに移動してください

次のターゲット ドメインを選択

フィールドにデータを入力します

このプロセスでは、一連のイベントがトリガーされ、これらのイベントを使用してデータを検証する機会を見つけることができます。

1) 入力フィールドが選択されると、onfocus イベント (フォーカス) が発生します

2) 入力フィールドを離れるとき – onblur イベントを発生させる (フォーカスを離れる)

3) ドメインを離れて入力コンテンツが変更されると、onchange イベントが発生します

最も正しい選択は、onblur イベントが発生したときにデータを検証することです

検証の最初のステップ: ドメインが空でないことを確認します

<input id="phone" name="phone" type="text" size="12" onblur="validateNonEmpty(this)"/>

validateNonEmpty を呼び出して onblur イベントに応答します

フォーム オブジェクトはキーワード this を使用して関数に渡されます

以下は検証機能です

function validateNonEmpty(inputField)
{
if(inputField.value.length==0)
{
alert("Please enter a value.");
return false;
} 
return true;
}

Web フォームを送信する場合、ユーザーが入力したデータは検証される必要があります

フォーム内のデータを確認したい場合は、getElementById() を使用して Web ページ上の任意の要素にアクセスできます

上記の内容は、JavaScript フォームと空でない検証の完全な説明です。皆様のお役に立てれば幸いです。