ホームページ > 記事 > ウェブフロントエンド > Bootstrap+jQuery.validate に基づいてフォーム検証を実装する

Bootstrap+jQuery.validate に基づいてフォーム検証を実装する

高洛峰オリジナル: 2017-01-03 17:36:321301ブラウズ

これはおそらく、フロントエンドとバックエンドを学ぶときに最初に触れる業務がユーザーの登録とログインです。現在、社会は人間本位の考え方を貫いており、Web サイトの開発プロセスにおいても同様です。ユーザーは私たちが最も直面するオブジェクトであり、最も核となるオブジェクトでもあります。最初のユーザー登録とログインは特に重要です。

ユーザー登録とログインは、私たちが思っているよりも難しいことがよくあります。たとえば、フォーム検証は実際には多くの内容をカバーしています。フロントデスクに関する限り、次のことを知っておく必要があります。

1. 正規表現の基本的な理解

実際、正規表現は難しいものではなく、次のことを可能にします。学習後は大きな達成感が得られ、半分の労力で 2 倍の成果が得られるという効果を実感してください。

2.ajax 非同期リクエスト

ユーザー名が存在するかどうかを確認するとき、またはユーザーが間違ったアカウントまたはパスワードでログインするときに、対応するプロンプトを提供します。

3. jQuery.validate などの便利な検証ライブラリ

このような一般的なニーズと特定の複雑さのため、ブートストラップフォームや jQuery.validate フォーム検証などのいくつかの優れたクラスライブラリは、人々の UI やフォームの問題を解決するために設計されています。検証問題。

以下は bootstrap+jQuery.validate を使用して作成したインターフェースです:

Bootstrap+jQuery.validate に基づいてフォーム検証を実装する

1. Bootstrap3 の基本フォームと水平フォーム

1. 基本フォーム

基本的なフォーム構造は次のように Bootstrap に付属しています。基本的なフォームを作成する手順を以下に示します。

role="form" を親要素

に追加します。
クラス .form-group を使用して、ラベルとコントロールを

に配置します。これは最適な間隔を得るために必要です。
クラス .form-control をすべてのテキスト要素、

、<select> に追加します。 <pre class="brush:js;toolbar:false"><form role="form">
 <div class="form-group">
  <label for="name">名称</label>
  <input type="text" class="form-control" id="name"
   placeholder="请输入名称">
 </div>
</form></pre><p>効果は次のとおりです:</p>
<p><img src="https://img.php.cn//upload/image/410/411/830/1483436029277469.png" title="1483436029277469.png" alt="Bootstrap+jQuery.validate に基づいてフォーム検証を実装する"></p>
<p>2. 水平フォーム</p>
<p>水平フォームを理解する前に、ブートストラップのグリッド システムについて知っておく必要があります。 </p>
<p>Bootstrap には、デバイスまたはビューポートのサイズが増加するにつれて、適切に 12 列までスケールアップする、応答性の高いモバイルファーストの流動的なグリッド システムが含まれています。これには、単純なレイアウト オプション用の事前定義クラスと、よりセマンティックなレイアウトを生成するための強力なミックスイン クラスが含まれています。 </p>
<p> 応答性の高いグリッド システム 画面またはビューポートのサイズが大きくなると、システムは自動的に最大 12 列に分割されます。つまり、幅がパーセンテージで定義されます。 </p>
<p><img src="https://img.php.cn//upload/image/801/770/144/1483436043189734.png" title="Bootstrap+jQuery.validate に基づいてフォーム検証を実装する" alt="Bootstrap+jQuery.validate に基づいてフォーム検証を実装する"    style="max-width:90%"  style="max-width:90%"></p>
<p>横型はマークの数が他の形式と異なるだけでなく、表示形式も異なります。水平方向にレイアウトされたフォームを作成するには、次の手順に従ってください。 </p>
<p> ステップ 1: クラス .form-horizontal を親 </p>
<form> 要素に追加します。 <br>ステップ 2: ラベルとコントロールをクラス .form-group の <div> に配置します。 <br>ステップ 3: クラス .control-label をラベルに追加します。 <pre class="brush:js;toolbar:false"><form class="form-horizontal" role="form">
 <div class="form-group">
  <label for="firstname" class="col-sm-2 control-label">名字</label>
  <div class="col-sm-10">
   <input type="text" class="form-control" id="firstname"
   placeholder="请输入名字">
  </div>
 </div>
</form></pre><p>効果は次のとおりです: </p>
<p><img src="https://img.php.cn//upload/image/162/439/534/1483436073388976.png" title="Bootstrap+jQuery.validate に基づいてフォーム検証を実装する" alt="Bootstrap+jQuery.validate に基づいてフォーム検証を実装する"    style="max-width:90%"  style="max-width:90%"></p>
<p>2. jQuery.validate カスタム検証メソッド </p>
<p>1. カスタム検証メソッド </p><pre class="brush:js;toolbar:false">// 手机号码验证
jQuery.validator.addMethod("isPhone", function(value, element) {
 var length = value.length;
 return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
}, "请正确填写您的手机号码。");</pre><p> を呼び出します </p>
<p> </p> <p>3.カスタムエラー表示</p>
<p></p>
<p></p>3. register.html<p><pre class="brush:js;toolbar:false">rules : {
 phone : {
   required : true,
   isPhone : true
  }
}</pre></p>4. form.js<p><pre class="brush:html;toolbar:false"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>注册</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
  
<link type="text/css" href="jslib/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
  
<script src="jslib/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/form.js" type="text/javascript"></script>
<script src="jslib/jQuery.validate/jquery.validate.js" type="text/javascript"></script>
<script src="jslib/bootstrap-3.3.5/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
#register-form{
 border: 1px solid rgb(197, 197, 197);
 width: 1000px;
 margin: auto;
 border-image: none;
 padding: 30px;
 border-radius: 3px;
}
</style>
  
</head>
<body>
 <h1 class="text-center text-danger">用户注册</h1><br>
 <form id="register-form" role="form" class="form-horizontal" method="get">
  <div class="form-group">
   <label class="col-sm-2 control-label" for="firstname">用户名：</label>
   <div class="col-sm-5">
    <input class="form-control" id="firstname" name="firstname" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="password">密码：</label>
   <div class="col-sm-5">
    <input class="form-control" id="password" name="password" type="password" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="confirm_password">确认密码：</label>
   <div class="col-sm-5">
    <input class="form-control" id="confirm_password" name="confirm_password" type="password" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="email">E-Mail：</label>
   <div class="col-sm-5">
    <input class="form-control" id="email" name="email" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="phone">手机号码：</label>
   <div class="col-sm-5">
    <input class="form-control" id="phone" name="phone" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="tel">固定电话：</label>
   <div class="col-sm-5">
    <input class="form-control" id="tel" name="tel" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="address">家庭住址：</label>
   <div class="col-sm-5">
    <input class="form-control" id="address" name="address" />
   </div>
  </div>
  <div class="form-group">
   <div class="col-md-offset-2 col-md-10">
    <button type="submit" class="btn btn-primary btn-sm">注册</button>
    <button type="reset" class="btn btn-primary btn-sm">重置</button>
   </div>
  </div>
 </form>
</body>
</html></pre><img src="https://img.php.cn//upload/image/785/207/696/1483436089832451.jpg" title="Bootstrap+jQuery.validate に基づいてフォーム検証を実装する" alt="Bootstrap+jQuery.validate に基づいてフォーム検証を実装する"    style="max-width:90%"  style="max-width:90%"> 以上、フォーム検証関連の知識を実装するためのBootstrap+jQuery.validateの紹介でした。独自のフォーム検証。 </p>
<p>Bootstrap+jQuery.validate に基づくフォーム検証に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。 </p>
</div>
</form></select>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Vue.js で毎日学ぶ必要があるコンポーネント間の通信次の記事：Vue.js で毎日学ぶ必要があるコンポーネント間の通信

続きを見る

Bootstrap+jQuery.validate に基づいてフォーム検証を実装する

関連記事