ブートストラップフォームを確認する方法

Bootstrapは、CSSとJavaScriptをインポートしてプロジェクトに追加できるフォーム検証機能を提供します。フォーム要素を作成し、特定の形式を検証するために必要な属性でフィールドまたはパターン属性を強制します。確認メッセージをカスタマイズすることもできます。フォームが送信されると、Bootstrapは自動的にチェックを実行し、エラーメッセージを表示し、送信をブロックします。 FAQ：検証を無効にすると、必要な属性とパターン属性が削除されます。 CheckVality（）メソッドは手動でトリガーできます。有効性属性は、検証結果を取得できます。

ブートストラップフォーム検証

Bootstrapは、シンプルで使いやすいフォーム検証関数を提供し、開発者がフォーム入力を簡単に確認できるようにします。

ブートストラップフォームの検証の使用方法

1. ブートストラップCSSとJavaScriptのインポート

   <link rel="stylesheet" href="path/to/bootstrap.min.css"> <script src="path/to/bootstrap.bundle.min.js"></script>

2. フォーム要素を作成します

   <form> <input type="text" id="name" name="name" placeholder="姓名" required> <input type="email" id="email" name="email" placeholder="邮箱" required> <button type="submit" class="btn btn-primary">提交</button> </form>

3. 検証ルールを追加
   required属性を使用してフィールドを強制的に記入します。 pattern属性を使用して正規表現を指定して、入力が電子メールアドレスなどの特定の形式に準拠していることを確認することもできます。

    <code class="html"><input type="email" id="email" name="email" placeholder="邮箱" required pattern="[a-z0-9._% -] @[a-z0-9.-] \.[az]{2,}$"></code>

4. カスタム検証メッセージ
   data属性を使用して、検証メッセージをカスタマイズできます。

    <code class="html"><input type="text" id="name" name="name" placeholder="姓名" required data-invalid-feedback="请输入您的姓名"></code>

5. フォームを送信
   フォームが送信されたら、ブートストラップは自動的に検証を実行します。検証が失敗した場合、エラーメッセージが表示され、フォームが送信されます。

よくある質問

• 検証を無効にする方法は？
  requiredとpatternプロパティを削除します。

• 検証を手動でトリガーする方法は？
  checkValidity()メソッドを使用します。

   <code class="javascript">document.getElementById("form").checkValidity();</code>

• 検証結果を取得する方法は？
  validityプロパティを使用してください。

   <code class="javascript">const nameInput = document.getElementById("name"); console.log(nameInput.validity.valid); // 返回true 或false</code>

以上がブートストラップフォームを確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。