• Skip to main content
  • Skip to search
  • Skip to select language
MDN Web Docs
  • References
    • Overview / Web Technology

      Web technology reference for developers

    • HTML

      Structure of content on the web

    • CSS

      Code used to describe document style

    • JavaScript

      General-purpose scripting language

    • HTTP

      Protocol for transmitting web resources

    • Web APIs

      Interfaces for building web applications

    • Web Extensions

      Developing extensions for web browsers

    • Accessibility

      Build web projects usable for all

    • Web Technology

      Web technology reference for developers

  • Learn
    • Overview / MDN Learning Area

      Learn web development

    • MDN Learning Area

      Learn web development

    • HTML

      Learn to structure web content with HTML

    • CSS

      Learn to style content using CSS

    • JavaScript

      Learn to run scripts in the browser

    • Accessibility

      Learn to make the web accessible to all

  • Plus
    • Overview

      A customized MDN experience

    • AI Help

      Get real-time assistance and support

    • Updates

      All browser compatibility updates at a glance

    • Documentation

      Learn how to use MDN Plus

    • FAQ

      Frequently asked questions about MDN Plus

  • Curriculum New
  • Blog
    • Playground

      Write, test and share your code

    • HTTP Observatory

      Scan a website for free

    • AI Help

      Get real-time assistance and support

  • Log in
  • Sign up for free
  1. 開発者向けのウェブ技術
  2. HTML
  3. ガイド
  4. 制約検証
    • English (US)
    • Deutsch
    • Français
    • Русский
    • 中文 (简体)

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

この記事では

  • 組み込みの基本的な制約
  • 制約検証プロセス
  • 制約検証 API を使用した複雑な制約
  • 制約検証の視覚的スタイル
  1. HTML
  2. ガイド
  3. コンテンツカテゴリー
  4. コメント
  5. 日付と時刻の形式
  6. 制約検証
  7. ビューポートの meta 要素
  8. レスポンシブ画像
  9. マイクロデータ
  10. マイクロフォーマット
  11. 後方互換モードと標準モード
  12. HTML 早見表
  13. 手引
  14. HTML で用語を定義する
  15. データ属性の使用
  16. 別オリジンの画像の利用
  17. 画像の上にヒットマップを追加する
  18. 読み込みが速い HTML ページを作成する
  19. JavaScript の追加
  20. リファレンス
  21. 要素
    1. 非推奨;
    2. 非推奨;

    3. 非推奨;
    4. 非推奨;
    5. Experimental
    6. 非推奨;
    7. 非推奨;
    8. 非推奨;

まず、自分自身の制約をチェックする関数を書きます。

js
function checkPostalCode() {
  // それぞれの国で、郵便番号が従うべきパターンを定義する
  var constraints = {
    ch: [
      "^(CH-)?\\d{4}$",
      "スイスの郵便番号は明確な 4 桁である必要があります。例: CH-1950 または 1950",
    ],
    fr: [
      "^(F-)?\\d{5}$",
      "フランスの郵便番号は明確な 5 桁です。例: F-75012 または 75012",
    ],
    de: [
      "^(D-)?\\d{5}$",
      "ドイツの郵便番号は明確な 5 桁です。例: D-12345 または 12345",
    ],
    nl: [
      "^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$",
      "オランダの郵便番号は明確な 4 桁に、SA、SD、SS 以外の2文字が続きます。",
    ],
  };

  // 国 ID を読む
  const country = document.getElementById("country").value;

  // NPA フィールドを取得
  const postalCodeField = document.getElementById("postal-code");

  // 制約チェッカーを構築
  const constraint = new RegExp(constraints[country][0], "");
  console.log(constraint);

  // チェックする
  if (constraint.test(postalCodeField.value)) {
    // 郵便番号は制約に従っていることを制約検証 API を使って伝える
    postalCodeField.setCustomValidity("");
  } else {
    // 郵便番号が制約に従っていないことを伝えるために、制約検証 API を使用して
    // この国で必要な書式についてのメッセージを伝える
    postalCodeField.setCustomValidity(constraints[country][1]);
  }
}

それから、これを の oninput イベントにリンクします。

js
window.onload = () => {
  document.getElementById("country").onchange = checkPostalCode;
  document.getElementById("postal-code").oninput = checkPostalCode;
};

アップロード前にファイルの大きさを制限

もう一つの一般的な制約は、アップロードされるファイルのサイズを制限することです。ファイルがサーバーに送信される前に、クライアント側でこれをチェックするには、制約検証 API、特に field.setCustomValidity() メソッドを、別の JavaScript API、ここではファイル API と組み合わせる必要があります。

こちらが HTML 部分です。

html


次のように表示されます。

JavaScript は選択されたファイルを読み込み、 File.size() メソッドを使ってそのサイズを取得し、それを(ハードコードされた)制限値と比較し、違反があった場合は Constraint API を呼び出してブラウザーに通知します。

js
function checkFileSize() {
  const fs = document.getElementById("fs");
  const files = fs.files;

  // 選択されているファイルが(少なくとも) 1 つある場合
  if (files.length > 0) {
    if (files[0].size > 75 * 1000) {
      // 制約をチェック
      fs.setCustomValidity("選択されたファイルは 75 kB より大きくてはいけません。");
      fs.reportValidity();
      return;
    }
  }
  // カスタム制約違反はない
  fs.setCustomValidity("");
}

最後に、このメソッドを正しいイベントにフックします。

js
window.onload = () => {
  document.getElementById("fs").onchange = checkFileSize;
};

制約検証の視覚的スタイル

制約条件を設定するだけでなく、ウェブ開発者は、ユーザーにどのようなメッセージを表示するか、どのようなスタイルにするかを制御したいと考えています。

要素の外見の制御

CSS の擬似クラスで、要素の外見を制御することができます。

:required および :optional 擬似クラス

:required と :optional 擬似クラスで、required 属性がある、またはないフォーム要素に一致するセレクターを書くことができます。

:placeholder-shown 擬似クラス

:placeholder-shown を参照してください。

:valid :invalid 擬似クラス

:valid と :invalid 擬似クラスは、 要素の内容がその型の設定に応じて、それぞれ検証されたか、検証に失敗したかを表すために使用します。これらのクラスは、有効または無効なフォーム要素にスタイルを与えることで書式が正しい要素と正しくない要素の識別をしやすくします。

制約違反のテキストの制御

制約違反のテキストを制御するには、以下の項目が有用です。

  • 以下の要素の setCustomValidity(message) メソッド

    • メモ: fieldset 要素にカスタム検証メッセージを設定しても、多くのブラウザーでは送信が抑止できません。