Bootstrap-validatorによるフォーム検証の方法

8790 ワード
JavaScriptの基礎
タスクの説明
このタスク:Bootstrap-validatorを使用してフォームを検証します.効果図は以下の通りです.
関連知識
このタスクを完了するには、次のことを把握する必要があります.
1.Bootstrap-validatorの参照
2.基本的なページ構造、
3.Jsの初期化.
Bootstrap-validatorの参照
Bootstrap-validatorはBootstrapとjQueryに依存しているので、このような環境が保証されています.
Bootstrap-validatorの使用にはbootstrapValidator.cssとbootstrapValidator.jsを導入する必要があります.コードは以下の通りです.

    • ここではCDNのダウンロードアドレスを します:Boottrap-validator
    なページ

    • :フォーム の にはnameのプロパティがあり、その は の されたjsの に しています.
    Jsの
    Js コードは の りです.
  • $(function () {
  • $('form').bootstrapValidator({
  • 　　　　　　　 message: 'This value is not valid',
  • 　feedbackIcons: {
  • 　　　　　　　　valid: 'glyphicon glyphicon-ok',
  • 　　　　　　　　invalid: 'glyphicon glyphicon-remove',
  • 　　　　　　　　validating: 'glyphicon glyphicon-refresh'
  • 　　　　　　　　 },
  • fields: {
  • username: {
  • message: ' ',
  • validators: {
  • notEmpty: {
  • message: ' '
  • },
  • stringLength: {
  • min: 6,
  • max: 18,
  • message: ' 6 18 '
  • },
  • regexp: {
  • regexp: /^[a-zA-Z0-9_]+$/,
  • message: ' 、 、 '
  • }
  • }
  • }
  • }
  • $("#submit").on("click", function(){
  • $("form").bootstrapValidator('validate');
  • if($("form").data('bootstrapValidator').isValid()){
  • alert(" ");
  • }
  • });
  • });

    • は の りです.
    ( から に):
  • message: フィールドに されたエラーメッセージ.ここには1つのフィールドusernameしかありません.
  • feedbackIcons: に づいて される なアイコン.inputラベルの にあります.
  • fields:フォームドメイン ;
  • username:name="username"が されたinputを すラベル.
  • message:エラーメッセージ;
  • validators: ルールを します.
  • notEmpty: が でない;
  • message: が の のヒント ;

  • stringLenght: さ;
  • min: さ;
  • max: さ;
  • message: さがこの にない のヒント ;

  • regexp: を できます.
  • regexp: ;
  • message: に しない のヒント ;





    • ここでは フォームを します. する は のとおりです.
  • validatorオブジェクトを します.$('form').bootstrapValidator(methodName, parameters);は、チェーン び し なメソッド とパラメータ を する があります.
  • は、validatorのインスタンスを する.var bootstrapValidator = $('form').data('bootstrapValidator'); bootstrapValidator.methodName(parameters)は、メソッドを び すことができる.
  • validate(): でフォームを し、ボタンやリンクをクリックする がある に できます.
  • isValid()は、 が なすべてのフィールドが であるかどうかを します.このメソッドを び す に、validate()を び して する があります.

    • これでフォームを すると です.
  • $("form").bootstrapValidator('validate');は の を す.
  • if($("form").data('bootstrapValidator').isValid()) を し、 した 、 の を します.

    • プログラミング
    ヒントに って、 のエディタBeginからEndの にコードを し、パスワードの を します. は のとおりです.
  • パスワードが の 、 は の りである: ;
  • パスワードの さは6-16ビットであり、 さが たされていない 、 6-16 ;
  • は/^[\w_-]{6,16}$/であり、 を たさない のヒント は 、 、 （-） である.

    • :この のヒント は、 で されています.
    は の りです.
     
    $(function () { $('form').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { username: { message: ' ', validators: { notEmpty: { message: ' ' }, stringLength: { min: 6, max: 18, message: ' 6 18 ' }, regexp: { regexp: /^[a-zA-Z0-9_]+$/, message: ' 、 、 ' } } }, telephone: { validators: { notEmpty: { message: ' ' }, stringLength: { min: 11, max: 11, message: ' 11 ' }, regexp: { regexp: /^1[3|5|8]{1}[0-9]{9}$/, message: ' ' } } }, password: { validators: { //------------- Begin -------------- notEmpty: { message: ' ' }, stringLength: { min: 6, max: 16, message:' 6-16 ' } regexp: { regexp: /^[\w_-]{6,16}$/, message: ' 、 、 （-） ' } //------------- End ---------------- } } } }); $("#submit").on("click", function(){ $("form").bootstrapValidator('validate'); if($("form").data('bootstrapValidator').isValid()){ alert(" "); } }); });
     
    jQueryソース分析のjQuery.eq()とjQuery.get()メソッド比較
    Layuiチェックボックスcheckboxの値を取得