validationEngine フォーム検証プラグインの使用例を共有する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

validationEngine フォーム検証プラグインの使用例を共有する

小云云

Jan 10, 2018 am 09:07 AM

説明書プラグイン

この記事では、jquery validationEngine フォーム検証プラグインの効果をサンプルコードとともに紹介します。これは非常に優れており、必要な方は参考にしていただければ幸いです。

まずレンダリングをお見せします。気に入ったら、実装コードを参照してください:

ナンセンスな話はやめて、コードを入力するだけで、直接コピーして実行できます:

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>validationEngine 插件</title>
    <!--<link rel="stylesheet" type="text/css" href="css/validationEngine.jquery.css" rel="external nofollow" />-->
    <link href="https://cdn.bootcss.com/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.css" rel="external nofollow" rel="stylesheet">
    <style type="text/css">
      *{
        padding: 0;
        margin: 0;
      }
      #form{
        padding-left: 20px;
      }
      #form .line{
        padding: 10px 0;
        margin: 10px 0;
        border-top: 1px dashed #0044CC;
      }
    </style>
  </head>
  <body>
    <form action="" method="post" id="form">
      <p class=&#39;line&#39;>
        必填项--输入框
      </p>
      <input value="" class="validate[required]" type="text" name="req">
      <p class=&#39;line&#39;>
        必填项--复选框
      </p>
      <input class="validate[required]" type="checkbox" name="agree">我同意服务协议
      <p class=&#39;line&#39;>
        url验证
      </p>
      <input value="http://" class="validate[required,custom[url]]" type="text" name="url">
      <p class=&#39;line&#39;>
        email验证
      </p>
      <input value="forced_error" class="validate[required,custom[email]]" type="text" name="email">
      <p class=&#39;line&#39;>
        IP 地址（v4）
      </p>
      <input value="192.168.3." class="validate[required,custom[ipv4]]" type="text" name="ip">
      <p class=&#39;line&#39;>
        数值
      </p>
      <input value="-33.87a" class="validate[required,custom[number]]" type="text" name="number">
      <p class=&#39;line&#39;>
        整数
      </p>
      <input value="10.1" class="validate[required,custom[integer]]" type="text" name="integer">
      <p class=&#39;line&#39;>
        相等运算
      </p>
      <input value="karnius" class="validate[required]" type="password" name="password" id="password">
      <input value="kaniusBAD" class="validate[required,equals[password]]" type="password" name="password2" id="password2">
      <p class=&#39;line&#39;>
        限制最小字符数
      </p>
      <input value="" class="validate[required,minSize[6]]" type="text" name="minsize">
      <p class=&#39;line&#39;>
        限制最大字符数
      </p>
      <input value="0123456789" class="validate[optional,maxSize[6]]" type="text" name="maxsize">
      <p class=&#39;line&#39;>
        输入整数（必须大于或等于 -5）
      </p>
      <input value="-7" class="validate[required,custom[integer],min[-5]]" type="text" name="min">
      <p class=&#39;line&#39;>
        输入整数（必须小于或等于 50）：
      </p>
      <input value="55" class="validate[required,custom[integer],max[50]]" type="text" name="max">
    </form>
    <!--<script src="../jquery/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>-->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!--<script src="js/jquery.validationEngine.min.js" type="text/javascript" charset="utf-8"></script>-->
    <script src="https://cdn.bootcss.com/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
    <!--<script src="js/jquery.validationEngine-zh_CN.min.js" type="text/javascript" charset="utf-8"></script>-->
    <script src="https://cdn.bootcss.com/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-zh_CN.min.js"></script>
    <script type="text/javascript">
      jQuery(document).ready(function() {
        jQuery(&#39;#form&#39;).validationEngine({
          scroll: false,
          promptPosition: &#39;centerRight&#39;,
          maxErrorsPerField: 1,
          showOneMessage: true,
          addPromptClass: &#39;formError-noArrow formError-text&#39;          
        });
      });
    </script>
  </body>
</html>

ログイン後にコピー

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7488

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

DirectX修復ツールの使い方は？ DirectX修復ツールの詳しい使い方 Mar 15, 2024 am 08:31 AM

DirectX 修復ツールは専門的なシステムツールであり、その主な機能は現在のシステムの DirectX 状態を検出することであり、異常が見つかった場合は直接修復できます。 DirectX 修復ツールの使い方がわからないユーザーも多いと思いますので、以下の詳細なチュートリアルを見てみましょう。 1. 修復ツールソフトウェアを使用して修復検出を実行します。 2. 修復の完了後、C++ コンポーネントに異常な問題があることを示すメッセージが表示された場合は、[キャンセル] ボタンをクリックし、[ツール] メニューバーをクリックしてください。 3. [オプション] ボタンをクリックし、拡張機能を選択して、[拡張機能の開始] ボタンをクリックします。 4. 拡張が完了したら、再検出して修復します。 5. 修復ツールの操作が完了した後も問題が解決しない場合は、エラーを報告したプログラムをアンインストールして再インストールしてみてください。

PyCharm 初心者ガイド: プラグインのインストールを徹底理解! Feb 25, 2024 pm 11:57 PM

PyCharm は、開発者がより効率的にコードを記述できるようにする豊富な機能とツールを提供する、強力で人気のある Python 統合開発環境 (IDE) です。 PyCharm のプラグイン機構は、機能を拡張するための強力なツールであり、さまざまなプラグインをインストールすることで、PyCharm にさまざまな機能やカスタマイズ機能を追加できます。したがって、PyCharm の初心者にとって、プラグインのインストールを理解し、習熟することが重要です。この記事では、PyCharm プラグインの完全なインストールについて詳しく説明します。

Illustrator でのプラグインの読み込みエラー [修正] Feb 19, 2024 pm 12:00 PM

Adobe Illustrator を起動すると、プラグインの読み込みエラーに関するメッセージが表示されますか?一部の Illustrator ユーザーは、アプリケーションを開いたときにこのエラーに遭遇しました。メッセージの後には、問題のあるプラグインのリストが続きます。このエラーメッセージは、インストールされているプラグインに問題があることを示していますが、Visual C++ DLL ファイルの破損や環境設定ファイルの破損など、他の理由によって発生する可能性もあります。このエラーが発生した場合は、この記事で問題を解決する方法を説明しますので、以下を読み続けてください。 Illustrator でのプラグインの読み込みエラー Adobe Illustrator を起動しようとしたときに「プラグインの読み込みエラー」エラーメッセージが表示された場合は、次の操作を行うことができます。管理者として

Chrome プラグイン拡張機能のインストールディレクトリとは何ですか? Mar 08, 2024 am 08:55 AM

Chrome プラグイン拡張機能のインストールディレクトリとは何ですか?通常の状況では、Chrome プラグイン拡張機能のデフォルトのインストールディレクトリは次のとおりです。 1. WindowsXP での Chrome プラグインのデフォルトのインストールディレクトリの場所: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\ Default\Extensions2. Windows7 の chrome プラグインのデフォルトのインストールディレクトリの場所: C:\Users\username\AppData\Local\Google\Chrome\User

HTTP 525 ステータスコードの概要: その定義と応用を調べる Feb 18, 2024 pm 10:12 PM

HTTP 525 ステータスコードの概要: その定義と使用法を理解する HTTP (HypertextTransferProtocol) 525 ステータスコードは、SSL ハンドシェイク中にサーバーでエラーが発生し、安全な接続を確立できないことを意味します。 Transport Layer Security (TLS) ハンドシェイク中にエラーが発生すると、サーバーはこのステータスコードを返します。このステータスコードはサーバーエラーカテゴリに分類され、通常はサーバーの構成またはセットアップの問題を示します。クライアントが HTTPS 経由でサーバーに接続しようとすると、サーバーには

Edge ブラウザがこのプラグインをサポートしない理由に対する 3 つの解決策を共有します Mar 13, 2024 pm 04:34 PM

ユーザーが Edge ブラウザを使用する場合、より多くのニーズを満たすためにいくつかのプラグインを追加する場合があります。しかし、プラグインを追加すると、このプラグインはサポートされていないと表示されます。この問題を解決するにはどうすればよいですか?今日は編集者が 3 つの解決策を紹介しますので、ぜひ試してみてください。方法 1: 別のブラウザを使用してみてください。方法 2: ブラウザ上の Flash Player が古いか見つからないため、プラグインがサポートされていない可能性があり、公式 Web サイトから最新バージョンをダウンロードできます。方法3：「Ctrl+Shift+Delete」キーを同時に押します。「データを消去」をクリックしてブラウザを再度開きます。

Baidu Netdisk の使用方法 - Baidu Netdisk の使用方法 Mar 04, 2024 pm 09:28 PM

Baidu Netdisk の使い方をまだ知らない友人も多いので、以下では編集者が Baidu Netdisk の使い方を説明しますので、必要な場合は急いでご覧ください。ステップ 1: Baidu Netdisk をインストールした後、直接ログインします (図を参照); ステップ 2: 次に、ページのプロンプトに従って [マイ共有] と [転送リスト] を選択します (図を参照); ステップ 3: 「「友達共有」では、写真やファイルを友達と直接共有できます (図を参照); ステップ 4: 次に、「共有」を選択し、コンピューターファイルまたはネットワークディスクファイルを選択します (図を参照); 5 番目のステップ 1:次に、友達を見つけることができます (写真に示すように); ステップ 6: 「機能宝箱」で必要な機能を見つけることもできます (写真に示すように)。以上、編集者の意見です

素早くコピー＆ペーストする方法を学ぶ Feb 18, 2024 pm 03:25 PM

コピー＆ペーストのショートカットキーの使い方コピー＆ペーストは、毎日パソコンを使っていると頻繁に遭遇する操作です。作業効率を向上させるためには、コピー＆ペーストのショートカットキーを使いこなすことが非常に重要です。この記事では、読者がコピーアンドペースト操作をより便利に実行できるように、一般的に使用されるコピーアンドペーストのショートカットキーをいくつか紹介します。コピーのショートカットキー: Ctrl+CCtrl+C はコピーのショートカットキーで、Ctrl キーを押しながら C キーを押すと、選択したテキスト、ファイル、画像などをクリップボードにコピーできます。このショートカットキーを使用するには、

See all articles

validationEngine フォーム検証プラグインの使用例を共有する

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック