jqueryのvalidationEngineを使用してフォームのバリデーションをどう実装するのか。

1年 ago
結衣, 春花
1 minute

jQueryのvalidationEngineプラグインを使用して、フォームのバリデーションを実装するには、まず関連するCSSとJavaScriptファイルをインポートする必要があります。プラグインの公式ウェブサイトから最新バージョンのファイルをダウンロードできます。

  1. CSSやJavaScriptファイルを導入する。
<link rel="stylesheet" href="validationEngine/css/validationEngine.jquery.css" type="text/css" media="screen" />
<script src="jquery.js"></script>
<script src="validationEngine/js/jquery.validationEngine.js"></script>
<script src="validationEngine/js/jquery.validationEngine-zh_CN.js"></script>
  1. フォームを作成し、検証ルールを追加してください。
<form id="myForm">
  <div>
    <label for="name">姓名:</label>
    <input type="text" id="name" class="validate[required]" />
  </div>
  
  <div>
    <label for="email">邮箱:</label>
    <input type="text" id="email" class="validate[required,custom[email]]" />
  </div>
  
  <div>
    <label for="phone">电话:</label>
    <input type="text" id="phone" class="validate[required,custom[phone]]" />
  </div>
  
  <input type="submit" value="提交" />
</form>
  1. validationEngineプラグインを初期化し、フォームのバリデーションを追加します。
$(document).ready(function() {
  $("#myForm").validationEngine();
});

現在、ユーザーがフォームを送信すると、validationEngineが自動的にフォームの入力が規則に従っているかどうかを検証します。検証エラーがある場合、適切なエラーメッセージが表示されます。

bannerAds