フォーム検証の深い議論の前に、フォームの検証の真の意味について考えてみましょう。そのコアに関する限り、フォーム検証は、エンドユーザーの無効な制御データを検出し、これらのエラーをマークするシステムです。言い換えれば、フォーム検証は、サーバーを送信する前に一連の検査を実施し、ユーザーにエラーを修正するように通知することです。
しかし、本当のフォームの検証とは何ですか?
それは最適化です。
フォーム検証が最適化されている理由は、フォーム検証メカニズムを介してのみサーバーに送信されたフォームデータが正しく効果的であることを保証するのに十分ではないためです。一方、設計フォームの検証は、Webアプリケーションにエラーをより速くスローすることです。言い換えれば、ブラウザの構築された-in処理メカニズムを使用して、無効なフォーム制御値を含むユーザーのWebページに通知することをお勧めします。過去には、データはインターネット上で折り返し、サーバーが間違ったデータを入力したことをユーザーに通知できるようにしました。ブラウザがクライアントを離れる前に完全にキャプチャできる場合は、この利点を使用する必要があります。
ただし、ブラウザのフォームチェックでは、すべてのエラーを処理するには十分ではありません。
そうは言っても、HTML5は、フォームコントロールのデータの正しさを検証するための8つの方法を依然として導入しています。それを順番に見てみましょうが、フィードバックについては、ステータスを確認するためにValueStateオブジェクトを紹介しましょう。
HTML5フォームの検証をサポートするブラウザでは、フォームコントロールを介して妥当性のあるオブジェクトにアクセスできます。
var value = document.myform.myinput.alivity;
このコード行では、MyInputと呼ばれる有効化されたオブジェクトを取得しました。オブジェクトには、8つの検証ステータスすべてへの参照と最終検証結果が含まれます。
通話方法は次のとおりです。
Valcheck.Valid
実行後、フォームコントロールがすべての検証制約に合格したかどうかを示すブール値を取得します。値の特性を最終的な検証結果として扱うことができます。8つの制約すべてが渡された場合、値の特性は真であり、そうでない場合、障害のある制約がある限り、値ロゴはすべてSです。
前述のように、あらゆるフォーム要素に8つの可能な検証制約があります。各条件には、妥当なステートオブジェクトに対応する特性名があり、適切な方法でアクセスできます。それらがフォームコントロールにどのように関連付けられているか、および妥当なステートオブジェクトに基づいてそれらをチェックする方法を確認するために、1つずつ分析しましょう。
1。valueMissing目的:フォームコントロールの値が記入されていることを確認してください。
使用法:フォームコントロールで、必要な機能をTRUEに設定します。
例:
<入力型=テキスト名= myText reby>
詳細な手順:フォームコントロールが必要な機能を設定する場合、ユーザーがコードコールで値を入力または埋める前に、コントロールが常に無効になります。たとえば、空のテキスト入力ボックスは、テキストに入力しない限り、必要なチェックに合格することはできません。入力値が空の場合、ValueMissingはtrueを返します。
2。TypeMismatch目的:コントロール値と予想されるタイプの一致(numbe、email、urlなど)を確保する。
使用法:フォームコントロールのタイプ特性値を指定します。
例:
<入力型=メール名= myemail>
詳細な指示:特別なフォームコントロールタイプは、携帯電話のキーボードをカスタマイズするためだけではありません。電子メールアドレスのシンボル、または番号タイプのコントロールの入力値は有効な数値ではありません。その場合、ブラウザはこのコントロールをマークして、タイプが一致していないことを示します。どんなエラーであっても、typeMismatchはtrueに戻ります。
3。パターンのマスマッチ目的:フォームコントロールに設定されたフォーマットルールに従って入力が有効かどうかを確認します。
使用法:フォームコントロールにパターン機能を設定すると、ウェルは適切な一致するルールを提供します。
例:
<入力タイプ=テキスト名= creditcardnumber pattern = [0-9] {16}ターゲット= '_lank'>正規表現検証メカニズム。入力制御の値がモードルールを満たしていない限り、パターン機能が制御に設定されている場合、パターンマスマッチは真の値を返します。ガイドユーザーとテクニカル参照の2つの側面から、パターン特性を含むフォームコントロールにタイトル特性を設定してルールを説明する必要があります。 4。Toolong目的:文字が多すぎる入力値は避けてください。
使用法:フォームコントロールに最大長の特性を設定します。
例:
<入力タイプ=テキスト名= limiteddtext maxlength = 140>
詳細な説明:入力値の長さが最大長を超えた場合、Toolong機能はtrueを返します。通常、フォームコントロールは、ユーザーが入力されているときに最大長に制限されますが、場合によってはプログラム設定など、最大値を超えます。
5。RangeUnderFlow目的:数値制御の最小値を制限します。
使用法:フォームコントロールのMIN機能を設定し、許容最小値を提供します。
例:
<入力タイプ=範囲name = agecheck min = 18>
詳細な指示:チェックする必要があるフォームコントロールでは、値は設定の下限よりも一時的に低くなる可能性があります。現時点では、culidityStateのrangeunderflow機能がtrueに戻ります。
6。RangeOverFlow目的:数値制御の最大値を制限します。
使用法:フォームコントロールの最大特性を設定し、最大値を与えます。
例:
<入力タイプ=範囲name = kidagecheck max = 12>
詳細な説明:rangeunderflowと同様に、フォームコントロールの値が最大よりも大きい場合、特性はtrueを返します。
7。stepmismatch目的:入力値が最小、最大、およびステップを満たしていることを確認してください。
使用法:フォームコントロールのステップ特性を設定し、値の増加を指定します。
例:
<入力タイプ=範囲name = confidencelevevel min = 0 max = 100 step = 5>
詳細な説明:この制約は、値がMin、Max、およびStepの要件を満たすことを保証するために使用されます。言い換えれば、現在の値は、最小値の倍数とステップ機能値の合計でなければなりません。たとえば、0から100まで、ステップ機能値は5です。この時点では17番はありません。そうしないと、継母が真の値を返します。
8。CustomError目的:配信アプリケーションコードは、エラーを明確に設定および計算します。
使用法:SetCustomValidity(メッセージ)を呼び出して、CustomError状態にフォーム制御パーツを配置します。
例:
PasswordConfiremativeField.setCustomalivity(パスワード値が一致しない);
詳細な手順:ブラウザの検証メカニズムが適用できない場合、カスタム検証エラー情報を表示する必要があります。入力値がセマンティックルールを満たしていない場合、アプリケーションコードはこれらのカスタム検証メッセージを設定する必要があります。
カスタマイズされた検証メッセージの典型的なケースは、制御制御の値が一貫しているかどうかを確認することです。たとえば、パスワードとパスワードは、2人の敗者の値が一致していないことを確認します。検証メッセージがカスタマイズされている限り、コントロールは無効な状態になり、CustomErrorはtrueに戻ります。エラーを削除するには、コントロール上のsetcustomvalidity()を呼び出してください。
さて、上記は、HTML5のテーブルだけで検証された8つの基本的な方法です。また、誰もがVEVB Wulin.comをサポートすることを願っています。