JS-Komponente Formular-Formularvalidierungsartefakt BootstrapValidator_javascript-Fähigkeiten

Dieser Artikel teilt das JS-Komponenten-Formular-Validierungsartefakt BootstrapValidator als Referenz. Der spezifische Inhalt ist wie folgt

1. Grundlegende Verwendung
Schauen Sie sich die Beschreibung von Bootstrapvalidator an: Ein jQuery-Formularvalidator für Bootstrap 3. Aus der Beschreibung können wir erkennen, dass mindestens jQuery- und Bootstrap-Unterstützung erforderlich ist. Wir stellen zunächst die erforderlichen js-Komponenten vor:

 <script src="~/Scripts/jquery-1.10.2.js"></script>

  <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
  <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

  <script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script>
  <link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />

Da es sich um eine Formularüberprüfung handelt, wissen wir, dass wir ein Formular auf der CSHTML-Seite haben müssen, und wir wissen, dass die Elemente im Formular über das Namensattribut abgerufen werden, sodass die Elemente im Formular einen Attributwert haben müssen des Namens.

　<form>
      <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" name="username" />
      </div>
      <div class="form-group">
        <label>Email address</label>
        <input type="text" class="form-control" name="email" />
      </div>
      <div class="form-group">
        <button type="submit" name="submit" class="btn btn-primary">Submit</button>
      </div>
    </form>

Nachdem wir das Formularelement haben, ist es Zeit, unsere js zu initialisieren.

  $(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: '用户名不能为空'
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: '邮箱地址不能为空'
            }
          }
        }
      }
    });
  });

Der Inhalt sollte leicht verständlich sein. Schauen wir uns den Effekt an:

Die Verifizierung ist fehlgeschlagen, die Schaltfläche „Senden“ ist ausgegraut und kann nicht angeklickt werden

Bestätigung bestanden, Schaltfläche „Senden“ wiederhergestellt

Sehen Sie den Effekt und spüren Sie ihn zuerst. Die größten Vorteile: einfache Bedienung und benutzerfreundliche Oberfläche. Werfen wir einen Blick auf die überlappende Validierung.

2. Mittlere Verwendung
Oben wissen wir, wie man eine nicht leere Verifizierung schreibt. Darüber hinaus muss es noch andere Verifizierungsmethoden geben. Keine Sorge, wir nehmen uns Zeit. Der cshtml-Teil des obigen Codes bleibt unverändert, wir werden den js-Teil leicht ändern:

　$(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: '用户名只能包含大写、小写、数字和下划线'
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: '邮箱不能为空'
            },
            emailAddress: {
              message: '邮箱地址格式有误'
            }
          }
        }
      }
    });
  });

Nachdem wir eine überlappende Überprüfung hinzugefügt haben, sehen wir uns den Effekt an:

Wie aus dem obigen Code ersichtlich ist, entspricht das Validators-Attribut einem Json-Objekt, das mehrere Verifizierungstypen enthalten kann:

• notEmpty: Nicht-Leer-Verifizierung
• stringLength: Überprüfung der Zeichenfolgenlänge;
regexp: Überprüfung regulärer Ausdrücke
emailAddress: Überprüfung der E-Mail-Adresse (wir müssen nicht die reguläre E-Mail-Adresse angeben~~)
• Darüber hinaus sehen wir im Dokument, dass es insgesamt 46 Verifizierungstypen gibt:

base64: 64-Bit-Kodierungsüberprüfung
zwischen: Stellen Sie sicher, dass der Eingabewert innerhalb eines bestimmten Bereichs liegen muss, z. B. größer als 10 und kleiner als 100;
• Kreditkarte: Ausweisüberprüfung
• Datum: Datumsüberprüfung
• IP: IP-Adressüberprüfung
• numerisch: numerische Überprüfung
• Telefon: Telefonnummernüberprüfung
• uri: URL-Überprüfung;
• Ein weiteres häufig verwendetes Attribut ist das SubmitHandler-Attribut, das der Ereignismethode der Submit-Schaltfläche entspricht. Wie folgt verwenden:

In der Demo werden viele Verifizierungsbeispiele vorgestellt. Werfen wir einen kurzen Blick auf die Wirkung des Implementierungscodes. Wenn Sie interessiert sind, können Sie sich die API direkt ansehen.

Farbüberprüfung

$(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: '用户名只能包含大写、小写、数字和下划线'
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: '邮箱不能为空'
            },
            emailAddress: {
              message: '邮箱地址格式有误'
            }
          }
        }
      },
      submitHandler: function (validator, form, submitButton) {
        alert("submit");
      }
    });
  });

Überprüfung des Tab-Seitenformulars

Schaltflächenüberprüfung

Das Obige dreht sich alles um diesen Artikel. Ich hoffe, dass er für das Studium aller hilfreich sein wird.