bootstrap validator使用ノート

最近やったプロジェクトは、フロントで使用しているbootstrapフレームワークです.フロントフレームワークでは、検証が不可欠です.よく使用されるいくつかの検証ルールでは、例があればより良いです.validatorを提供するAPIがありますが、あまり使いにくい感じです.そこで、よく使われるいくつかの検査方法を記録します.
準備作業
ダウンロード:関連するjsとcssファイルの使用前提はbootstrapフレームワークである必要があります.次にプロジェクトに導入します.
検証タイプ
クライアントフロントセルフチェック
       この検査方式はvalidatorがよくパッケージされています.ただ、フロントインタフェースを書くときは、以下のような構造を使います.

<div class="form-group">
    <label class="col-lg-3 control-label">Full name</label>
    <div class="col-lg-4">
        <input type="text" class="form-control" name="firstName" placeholder="First name" required data-bv-notempty-message="firstName    (   )" />
    </div>
</div>

       上記の構造は、対応する検証方式を書き、data-bv......を置き換えたり、属性を追加したりするだけでよい.
チェツク常用方式
ひくうしけん

data-bv-notempty-message="XXX    "

長さ制限チェック

data-bv-stringlength="true" data-bv-stringlength-min="6" data-bv-stringlength-max="30" data-bv-stringlength-message="          6，    30 "

メールボックスチェック

type="email" data-bv-emailaddress-message="The input is not a valid email address"

日付書式チェック

data-bv-date="false" data-bv-date-format="YYYY/MM/DD" data-bv-date-message="The birthday is not valid"

フロントバックグラウンドインタラクティブチェック
       前後のインタラクションチェックではajaxのコールバック関数でチェックするのが最も一般的です.以下に例を示します.テンプレートとして使用できます.

$('#defaultForm').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {        //    
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        firstName: {
            validators: {
                notEmpty: {        //     +    
                    message: 'The first name is required and cannot be empty'
                }
            }
        },
        lastName: {
            validators: {
                notEmpty: {
                    message: 'The last name is required and cannot be empty'
                }
            }
        },
        username: {
            message: 'The username is not valid',
            validators: {
                notEmpty: {
                    message: 'The username is required and cannot be empty'
                },
                stringLength: {     //  　    　　  
                    min: 6,
                    max: 30,
                    message: 'The username must be more than 6 and less than 30 characters long'
                },
                regexp: {           //    
                    regexp: /^[a-zA-Z0-9_\.]+$/,
                    message: 'The username can only consist of alphabetical, number, dot and underscore'
                },
                remote: {
                    url: 'remote.php',
                    message: 'The username is not available'
                },
                different: {
                    field: 'password',
                    message: 'The username and password cannot be the same as each other'
                }
            }
        },
        email: {
            validators: {
                emailAddress: {     //　　      
                    message: 'The input is not a valid email address'
                }
            }
        },
        password: {
            validators: {
                notEmpty: {
                    message: 'The password is required and cannot be empty'
                },
                identical: {
                    field: 'confirmPassword',
                    message: 'The password and its confirm are not the same'
                },
                different: {
                    field: 'username',
                    message: 'The password cannot be the same as username'
                }
            }
        },
        captcha: {
            validators: {
                callback: {     //         
                    message: 'Wrong answer',        //    
                    callback: function(value, validator) {
                        // ajax     ，    。       return false;      return true;
                        var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
                        return value == sum;
                    }
                }
            }
        }
    }
});

       このチェック方式の書き方は分かりやすく、fieldの下にチェックが必要なフィールドを書いてチェック方式を示すだけでよい.       フロントバックグラウンドインタラクションがある場合はcallbackメソッドを書くだけで検証が完了します.
フォーム提出前チェック
この方式は、上記の書き方の補足であり、例は以下の通りである.

$('#defaultForm').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        ……
        ……
    }
})
.on('success.form.bv', function(e) {
    // Prevent form submission
    e.preventDefault();

    // Get the form instance
    var $form = $(e.target);

    // Get the BootstrapValidator instance
    var bv = $form.data('bootstrapValidator');

    // Use Ajax to submit form data
    $.post($form.attr('action'), $form.serialize(), function(result) {
        console.log(result);
    }, 'json');
});

       フォームのコミット前の検証では、主に上記の検証の第2の保護であり、onメソッドを追加するだけでよい.
まとめ
       成熟したフレームワークには、便利な書き方があり、フレームワークの役割を果たすことができます.私たちがしなければならないのは、使用をマスターし、迅速な開発です.