So überprüfen Sie das Bootstrap -Formular

Bootstrap bietet Formalüberprüfungsfunktionen, die Projekten durch Importieren von CSS und JavaScript hinzugefügt werden können. Erstellen Sie ein Formularelement und erzwingen Sie die Felder oder Musterattribute, die mit dem erforderlichen Attribut ausgefüllt werden sollen, um ein bestimmtes Format zu überprüfen. Sie können auch die Überprüfungsnachricht anpassen. Wenn ein Formular eingereicht wird, führt Bootstrap automatisch eine Prüfung durch, zeigt eine Fehlermeldung an und blockiert die Einreichung. FAQ: Deaktivieren der Verifizierung beseitigt die erforderlichen und Musterattribute. Die Methode checkvalidity () kann manuell ausgelöst werden; Das Validitätsattribut kann das Überprüfungsergebnis erhalten.

Bootstrap -Form -Überprüfung

Bootstrap bietet einfache und benutzerfreundliche Form-Überprüfungsfunktionen, mit denen Entwickler die Formulierung problemlos überprüfen können.

So verwenden Sie die Verifizierung von Bootstrap -Formular

1. Importieren von Bootstrap CSS und JavaScript

    <code class="html"><link rel="stylesheet" href="path/to/bootstrap.min.css"> <script src="path/to/bootstrap.bundle.min.js"></script></code>

2. Formularelemente erstellen

    <code class="html"><form> <input type="text" id="name" name="name" placeholder="姓名" required> <input type="email" id="email" name="email" placeholder="邮箱" required> <button type="submit" class="btn btn-primary">提交</button> </form></code>

3. Überprüfungsregeln pattern required

    <code class="html"><input type="email" id="email" name="email" placeholder="邮箱" required pattern="[a-z0-9._% -] @[a-z0-9.-] \.[az]{2,}$"></code>

4. Benutzerdefinierte Überprüfungsnachricht
   Sie können data verwenden, um die Überprüfungsnachricht anzupassen:

    <code class="html"><input type="text" id="name" name="name" placeholder="姓名" required data-invalid-feedback="请输入您的姓名"></code>

5. Sendenformular
   Wenn ein Formular eingereicht wird, führt Bootstrap automatisch eine Überprüfung durch. Wenn die Überprüfung fehlschlägt, wird eine Fehlermeldung angezeigt und das Formular eingereicht.

Häufig gestellte Fragen

• Wie deaktiviere ich die Überprüfung?
  Entfernt required und pattern .

• Wie löst ich die Überprüfung manuell aus?
  Verwenden Sie checkValidity() :

   <code class="javascript">document.getElementById("form").checkValidity();</code>

• Wie bekomme ich das Verifizierungsergebnis?
  Verwenden Sie validity Gültigkeitseigenschaft:

   <code class="javascript">const nameInput = document.getElementById("name"); console.log(nameInput.validity.valid); // 返回true 或false</code>

Das obige ist der detaillierte Inhalt vonSo überprüfen Sie das Bootstrap -Formular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!