クライアント側のフォーム検証

クライアントフォームの検証は重要です。時間と帯域幅を節約し、フォームに記入するときにユーザーが間違いを犯す場所を指摘するためのより多くのオプションを提供します。そうは言っても、これはサーバー側の確認を必要としないという意味ではありません。あなたのウェブサイトにアクセスするユーザーは、古いブラウザまたは無効なJavaScriptを使用している可能性があります。クライアントとサーバー側の検証は互いに補完されるため、実際に独立して使用するべきではありません。

なぜクライアント検証が重要なのですか？

クライアント認証を使用する2つの理由があります：

1. これはすぐに確認する方法です。何かがうまくいかない場合、フォームが送信されるとアラートがトリガーされます。

2. 一度に1つのエラーのみを安全に表示し、間違ったフィールドに焦点を合わせて、ユーザーが必要なすべての詳細を正しく記入できるようにすることができます。

2つの主要な検証方法

クライアントフォームの検証の2つの主な方法は次のとおりです。

一度にエラーを表示し、問題のあるフィールドに焦点を合わせます
すべてのエラーを同時に表示すると、サーバー側の検証スタイル

サーバー側の検証にはすべてのエラーを同時に表示する必要がありますが、クライアントを確認するためのより良い方法は、一度に1つのエラーを表示することです。これにより、誤って満たされたフィールドのみを強調表示できるため、訪問者がフォームを正常に変更して送信しやすくなります。すべてのエラーを同時にユーザーに提示すると、ほとんどの人は、各修正後に再送信しようとするのではなく、一度にそれらを覚えて修正しようとします。

これらの利点を考えると、一度に1つのエラーを示す検証方法のみに焦点を当てます。

フォームを確認する方法

たとえば、

次のコードスニペット：

<code><br>
function validateMyForm() { <br>
if (parseInt(document.forms[0].phone.value)  <br>
        != document.forms[0].phone.value) { <br>
alert('请输入电话号码，仅限数字'); <br>
return false; <br>
} <br>
 <br>
return true; <br>
} <br>
<br><br></code>

電話：

何が問題なのですか？まあ、これの前に別のフォームを追加すると、コードは間違ったフォームを検証しようとします。

より良い方法は、フォーム名を含めることです：

<code>function validateMyForm() { <br>
if (parseInt(document.forms.myForm.phone.value)  <br>
        != document.forms.myForm.phone.value) { <br><br></code>

onsubmit = "return validatemyform（）;"＆gt;

フォーム名を削除しましょう：

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br><br></code>

この最後の方法では、オブジェクトを使用します。これは常に現在のオブジェクトを指します。これにより、コードがよりポータブルになり、タイピング時間を節約できます。

訪問者の生活を今より楽にするにはどうすればよいですか？エラーを自分で調べるのではなく、エラーをトリガーするフィールドに焦点を当てましょう。

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br>
alert('请输入电话号码，仅限数字'); <br>
form.phone.focus(); <br>
form.phone.select(); <br>
return false; <br>
}</code>

これらの変更により、ブラウザは誤ったフィールドへの記入に焦点を当て、訪問者のテキストを選択します。スクロールが必要な場合は、これも自動的に発生します。

わかりました、これは素晴らしいですが、各フィールドにコードが多すぎると思いますか？ページに多くのタイピングとダウンロード時間を節約できる単純な機能のライブラリを作成した場合はどうなりますか？さて、次にこれを行います - 検証コードを短くするために基本的な関数を定義します。

<code><br>
function validateMyForm() { <br>
if (parseInt(document.forms[0].phone.value)  <br>
        != document.forms[0].phone.value) { <br>
alert('请输入电话号码，仅限数字'); <br>
return false; <br>
} <br>
 <br>
return true; <br>
} <br>
<br><br></code>

この関数は、数字の単純な検証を実行します - フィールドに数値のみが含まれているかどうか、およびそれが特定の範囲内にあるかどうかをチェックします。このコードがパラメーターとしてエラーメッセージを渡すことに気付くでしょう。このような関数を使用するには、基本的に次のように監督ハンドラーに追加できます。

<code>function validateMyForm() { <br>
if (parseInt(document.forms.myForm.phone.value)  <br>
        != document.forms.myForm.phone.value) { <br><br></code>

onsubmit = "return validAtenumber（this.phone、

「電話番号を入力してください、数値のみ」、5、10）;
数値を検証する別の方法は、特定の範囲内にあることを要求することです。関数にそのような検証を実行させるには、チェックラインを次のように変更するだけです。

複数のチェックをフォームに適用する場合は、OnSubmitハンドラーに複数のルールを埋め込むことができます。たとえば、電話番号に加えて、姓と姓も入力する必要があると想像してください。

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br><br></code>

onsubmit = "return（

validAtenumber（this.phone、 '電話を入力してください

番号、数字のみ '、5、10）&&

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br>
alert('请输入电话号码，仅限数字'); <br>
form.phone.focus(); <br>
form.phone.select(); <br>
return false; <br>
}</code>

validAtestring（this.firstname、 '入力

を入力してください あなたの名前 '、3、15）&&
validAtestring（this.lastname、 '入力してください
あなたの姓 '、3、15）
）; "＆gt;コードでは、すべての検証ルールをtrueとして評価する必要があります（ロジックと - &&を使用）。詳細な見方は、サーバースクリプト言語からそのようなコードを生成するのが非常に簡単であることを示しています...しかし、これは別の記事です。

ご覧のとおり、文字列検証関数は多かれ少なかれ同じように見えます。

ウェブ上の多くの形式、つまりユーザーのメールアドレスで共通のフィールドが必要です。私はこれを行う多くの機能を見てきましたが、通常、電子メールアドレスを検証する最も簡単で簡単な方法は、正規表現を使用することです。

<code>function validateNumber(field, msg, min, max) {  <br>
if (!min) { min = 0 }  <br>
if (!max) { max = 255 }  <br>
  <br>
if ( (parseInt(field.value) != field.value) ||   <br>
        field.value.length  max) {  <br>
alert(msg);  <br>
field.focus();  <br>
field.select();  <br>
return false;  <br>
}  <br>
  <br>
return true;  <br>
}</code>

ここで、フィールドをオプションとして定義できるように、関数を拡張します。

必要なメールを確認するには、次のように呼び出す必要があります。

オプションに設定する場合：

<code></code>

JavaScriptを検証だけに使用することはできませんが、持っている場合は非常に役立ちます。 HTMLに埋め込んだコードをコンパクトになればなるほど、ダウンロード時間を節約し、検索エンジンがあなたのようになります！

<code>if ((parseInt(field.value) != field.value) ||   <br>
field.value  max) {</code>

フォーム検証（FAQ）

に関するよくある質問

クライアント検証とサーバー側の検証の違いは何ですか？

<code></code>

フォームデータがサーバーに送信される前に、JavaScriptを使用して、ユーザーのブラウザでクライアント検証が実行されます。インスタントフィードバックを提供し、ユーザーエクスペリエンスを向上させます。ただし、JavaScriptを無効にしたり、コードを操作したりすることでバイパスすることができるため、完全に安全ではありません。

一方、フォームデータを送信した後、サーバー側の検証がサーバーで実行されます。ユーザーがバイパスできないため、より安全です。ただし、パフォーマンスやユーザーエクスペリエンスに影響を与える可能性のあるサーバーへの往復が必要です。したがって、最高のセキュリティとユーザーエクスペリエンスのために、クライアントとサーバー側の両方の検証を使用することをお勧めします。

PHPでフォーム検証を実装する方法は？

PHPは、さまざまなフォーム検証関数を提供します。たとえば、さまざまなフィルターを使用してFilter_Var（）関数を使用して、入力データを検証およびクリーニングできます。これがメールアドレスを確認する簡単な例です。

$ email = $ _post ["email"]; if（！filter_var（$ email、filter_validate_email））{ エコー「無効な電子メール形式」; } このコードは、送信された電子メールアドレスが正しくフォーマットされているかどうかを確認します。そうでない場合は、エラーメッセージが表示されます。

いくつかの一般的な検証手法は何ですか？

いくつかの一般的な検証手法には、必要なフィールド、長さの制限、パターンマッチング、およびデータ型チェックが含まれます。必要なフィールドは、ユーザーが必要なすべての情報を入力することを保証します。長さの制限は、入力できる文字の数を制限します。パターンマッチは、入力が電子メールアドレスや電話番号などの特定のパターンと一致するかどうかを確認します。データ型チェックにより、入力が数字や日付などの正しいタイプであることが保証されます。

検証エラーメッセージを表示する方法は？

JavaScriptを使用して、PHPを使用してクライアント検証またはサーバー側の検証を使用して検証エラーメッセージを表示できます。 JavaScriptでは、setCustomValisit（）メソッドを使用して、カスタム検証メッセージを設定できます。 PHPでは、変数にエラーメッセージを保存して、フォームに表示できます。

チェックボックスを確認する方法は？

チェックボックスが選択されているかどうかを確認して、チェックボックスを確認できます。 JavaScriptでは、チェックされたプロパティを使用できます。 PHPでは、チェックボックスの値が$ _POSTまたは$ _GETで表示されるかどうかを確認できます。

ドロップダウンリストを確認する方法は？

有効なオプションが選択されているかどうかを確認して、ドロップダウンリストを確認できます。 JavaScriptでは、SelectedIndexプロパティを使用できます。 PHPでは、選択した値が有効な値の配列にあるかどうかを確認できます。

ラジオボタンを検証する方法は？

オプションのいずれかが選択されているかどうかを確認して、ラジオボタンを確認できます。 JavaScriptでは、ラジオボタンをループして、チェックされたプロパティを使用できます。 PHPでは、無線ボタンの値が$ _POSTまたは$ _GETで表示されるかどうかを確認できます。

日付を確認する方法は？

日付が正しくフォーマットされているかどうか、実際の日付であるかどうかを確認して、日付を確認できます。 JavaScriptでは、日付オブジェクトを使用できます。 PHPでは、checkdate（）関数を使用できます。

ファイルアップロードを検証する方法は？

ファイルのサイズ、ファイルの種類、ファイル拡張子をチェックして、ファイルのアップロードを確認できます。 JavaScriptでは、ファイルプロパティを使用できます。 PHPでは、$ _filesアレイを使用できます。

SQL注射を防ぐ方法は？

前処理されたステートメントまたはSQLコードをデータから分離するパラメーター化されたクエリを使用して、SQLインジェクションを防ぐことができます。これにより、データがコードとして解釈されるのを防ぎます。 PHPでは、PDOまたはMySQLI拡張機能を使用して、プレ処理ステートメントを実行できます。

以上がクライアント側のフォーム検証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。