jquery fordert Eingabefehler auf

Beim Website-Design sind Formulare eines der gemeinsamen Elemente. Der Formularbenutzer gibt die Informationen ein, die übermittelt werden müssen, und dann prüft die Website die Gültigkeit der Daten durch Formularüberprüfung. Um die Benutzererfahrung zu verbessern, werden in Formularen häufig jQuery-Plug-ins verwendet, um einige Tipps und Feedback bereitzustellen. Ein häufiges Plug-In ist unter anderem die Eingabeaufforderung für Fehler.

Eingabeaufforderungen zu Fehlern ermöglichen es Benutzern, vor dem Absenden des Formulars zu erkennen, welche Daten illegal sind, wodurch Benutzer Zeit sparen und Fehler reduzieren. Unten sehen Sie ein Beispiel, das zeigt, wie eine Eingabeaufforderung für Eingabefehler implementiert wird.

Erstellen Sie zunächst ein einfaches HTML-Formular. Das Formular enthält drei Felder: Name, E-Mail und Passwort.

<form id="signup-form">
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" id="name" placeholder="请输入您的姓名">
  </div>
  <div class="form-group">
    <label for="email">电子邮件</label>
    <input type="email" class="form-control" id="email" placeholder="请输入您的电子邮件">
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control" id="password" placeholder="请输入密码">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

Als nächstes verwenden wir das jQuery-Plugin, um Eingabefehler zu melden. Mit dem Validierungs-Plugin von jQuery können Sie ein Formular dynamisch überprüfen, bevor der Benutzer es auf der Grundlage der Regeln für die Formularfelder (z. B. erforderliche Felder oder E-Mail-Formate) absendet. Wenn das Feld nicht den Regeln entspricht, wird ein Eingabefehler angezeigt. Das Folgende ist ein Beispiel für die Implementierung dieser Funktion:

$(document).ready(function(){
  $("#signup-form").validate({
    rules: {
      name: {
        required: true
      },
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 6
      }
    },
    messages: {
      name: {
        required: "姓名不能为空"
      },
      email: {
        required: "电子邮件不能为空",
        email: "电子邮件格式不正确"
      },
      password: {
        required: "密码不能为空",
        minlength: "密码至少需要6个字符"
      }
    },
    errorElement: "div",
    errorPlacement: function(error, element) {
      error.addClass("invalid-feedback");
      element.closest(".form-group").append(error);
    },
    highlight: function(element, errorClass, validClass) {
      $(element).addClass("is-invalid").removeClass("is-valid");
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).removeClass("is-invalid").addClass("is-valid");
    }
  });
});

Im obigen Beispiel wird das Validierungs-Plug-in verwendet, wenn die Seite über $(document).ready()-Methode. Das Objekt <code>rules spezifiziert Regeln und das Objekt messages spezifiziert Fehlermeldungen. In Fehlermeldungen können Sie das Sonderzeichen „$“ verwenden, um auf den Namen eines Formularfelds zu verweisen. $(document).ready()方法在页面加载时使用了validate插件。rules对象指定了规则，messages对象指定了错误信息。在错误信息中，可以使用特殊字符“$”符号来引用表单字段的名称。

errorElement选项将使用div元素来呈现错误消息。errorPlacement选项将错误消息插入到与输入字段相关联的 form-group 类中。highlight和unhighlight

Das obige ist der detaillierte Inhalt vonjquery fordert Eingabefehler auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!