BootStrapValidator を使用してフロントエンド入力検証を完了する

この記事では、主にフロントエンド入力検証を完了するための BootStrapValidator の使用方法を詳しく紹介します。興味のある方は、

を参照してください。もちろん、それを使用することもできます。デフォルトのスタイルを変更して、より美しく見えるようにします。

その使用法について話しましょう:

1. BootStrapValidator をダウンロードします

BootStrapValidator の公式ダウンロード アドレスをクリックしてダウンロードできます。

2. ダウンロード後のディレクトリ構造

ダウンロードが完了し、すべてのファイルが変換されると、ディレクトリ構造は次のようになります:

'

プロジェクト内で直接使用できるファイルは dist に配置されます。インスタンスはデモに配置され、インスタンスが依存する BootStrap および Jquery ファイルは Vendor フォルダーに配置されます。プロジェクトの BootStrap バージョンが使用するバージョンと一致しない場合は、その BootStrap ファイルを使用することをお勧めします。そうしないと、表示上の問題が発生する可能性があります (数日間悩みましたが、最終的に解決しました)。その使用方法を見てみましょう。 :

3. 使い方

何も言うことはありません、コードに進みます:

(1) ライブラリリファレンス

<link rel="stylesheet" href="../public/static/vendor/bootstrap/css/bootstrap.min.css"/>
<script src="../public/static/js/jquery.min.js"></script>
<script src="../public/static/vendor/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../public/static/vendor/bootstrapvalidator/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="../public/static/vendor/bootstrapvalidator/js/bootstrapValidator.min.js"></script>

主にBootStrapのjsファイルとcssファイル、BootStrapValidatorのjsファイルとCSSファイルを指します。上記は私のプロジェクト構造に基づいて引用したものです。もちろん、独自のアイデアに従ってディレクトリを作成することもできます。

(2)HTML部分

<div class="row">
<form action="dologin" method="post" id="loginform">
 <div class="form-group">
 <div class="input-group input-group-md">
 <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
 <input type="text" class="form-control" name="username" placeholder="用户名" />
 </div>
 </div>
 <div class="form-group">
 <div class="input-group input-group-md">
 <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span>
 <input type="password" class="form-control" name="pwd" placeholder="密码" />
 </div>
 </div>
 <div class="well well-sm" style="text-align:center;">
  
 <input type="radio" name="kind" value="tea"> 老师
 <input type="radio" name="kind" value="stu"> 学生
 </div>
 <button type="submit" class="btn btn-success btn-block">
      登录
 </button>
 </form> 
 </div>

(3)Jquery検証部分のコード

$(document).ready(function(){
 // 在这里写你的代码...
 $('#loginform').bootstrapValidator({
 message:"您的输入值不合法",
 feedbackIcons:{
 valid: 'glyphicon glyphicon-ok',
  invalid: 'glyphicon glyphicon-remove',
  validating: 'glyphicon glyphicon-refresh'
 },
 fields:{
 username:{
 validators:{
 notEmpty:{
 message:'用户名不能为空'
 }
 }
 },
 pwd:{
 validators:{
 notEmpty:{
 message:'请输入密码'
 }
 }
 }
 },
 });
 });

さて、これで書き終わりました。もちろん、ここでは基本的な使い方をいくつか紹介します。非同期検証 (およびサーバー側通信検証) については、このサイトに多くのチュートリアルがあるため、ここでは詳しく説明しません。この記事がお役に立てば幸いです!

BootStrapValidator を使用してフロントエンド入力検証を完了することに関するその他の記事については、PHP 中国語 Web サイトに注目してください。