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

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

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

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

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

2つの主要な検証方法

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

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

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

これらの利點を考えると、一度に1つのエラーを示す検証方法のみに焦點を當(dāng)てます。

フォームを確認(rèn)する方法

たとえば、

次のコードスニペット：

<code><br>
function validateMyForm() { <br>
if (parseInt(document.forms[0].phone.value) ?<br>
 ? ? ? ?!= document.forms[0].phone.value) { <br>
alert('請輸入電話號碼，僅限數(shù)字'); <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>

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

訪問者の生活を今より楽にするにはどうすればよいですか？エラーを自分で調(diào)べるのではなく、エラーをトリガーするフィールドに焦點を當(dāng)てましょう。

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br>
alert('請輸入電話號碼，僅限數(shù)字'); <br>
form.phone.focus(); <br>
form.phone.select(); <br>
return false; <br>
}</code>

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

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

<code><br>
function validateMyForm() { <br>
if (parseInt(document.forms[0].phone.value) ?<br>
 ? ? ? ?!= document.forms[0].phone.value) { <br>
alert('請輸入電話號碼，僅限數(shù)字'); <br>
return false; <br>
} <br>
 <br>
return true; <br>
} <br>
<br><br></code>

この関數(shù)は、數(shù)字の単純な検証を?qū)g行します - フィールドに數(shù)値のみが含まれているかどうか、およびそれが特定の範(fàn)囲內(nèi)にあるかどうかをチェックします。このコードがパラメーターとしてエラーメッセージを渡すことに気付くでしょう。このような関數(shù)を使用するには、基本的に次のように監(jiān)督ハンドラーに追加できます。

<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、

「電話番號を入力してください、數(shù)値のみ」、5、10）;
數(shù)値を検証する別の方法は、特定の範(fàn)囲內(nèi)にあることを要求することです。関數(shù)にそのような検証を?qū)g行させるには、チェックラインを次のように変更するだけです。

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

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

onsubmit = "return（

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

番號、數(shù)字のみ '、5、10）&&

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br>
alert('請輸入電話號碼，僅限數(shù)字'); <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として評価する必要があります（ロジックと - &&を使用）。詳細(xì)な見方は、サーバースクリプト言語からそのようなコードを生成するのが非常に簡単であることを示しています...しかし、これは別の記事です。

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

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

<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>

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

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

オプションに設(shè)定する場合：

<code></code>

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

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

フォーム検証（FAQ）

に関するよくある質(zhì)問

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

<code></code>

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

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

PHPでフォーム検証を?qū)g裝する方法は？

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

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

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

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

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

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

チェックボックスを確認(rèn)する方法は？

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

ドロップダウンリストを確認(rèn)する方法は？

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

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

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

日付を確認(rèn)する方法は？

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

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

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

SQL注射を防ぐ方法は？

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

以上がクライアント側(cè)のフォーム検証の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。