twitter-bootstrap
Bootstrap-Überprüfung

Angular 2 AngularJS ASP.NET asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails
Suche…


Bemerkungen

  • Diese Validierungstechnik kann nur für Eingaben verwendet werden, die sich innerhalb eines Formulars befinden.

  • Eigenschaften müssen mindestens eine Validierungsanforderung aufweisen, um die Hervorhebung bei einer fehlgeschlagenen onSubmit() Validierung onSubmit() . Datentypen (mit Ausnahme von string) erfordern eine versteckte Datentypanforderung. Daher ist keine explizite Datenanmerkung erforderlich. Zeichenfolgen haben dies nicht. [MinLengthAttribute(0)] eine Validierungsprüfung zusammen mit den anderen Feldern zu erzwingen, fügen Sie die [MinLengthAttribute(0)] .

Verwenden von ASP.NET MVC und Datenanmerkungen

Fügen Sie in <appSettings> Folgendes zu Web.config (im Ordner Views) <appSettings> : 

<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

Fügen Sie das BundleConfig.cs-Paket jqueryval hinzu: 

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
        "~/Scripts/jqueryval/jquery.validate*"));

Fügen Sie allen Seiten, für die eine Validierung erforderlich ist, Folgendes hinzu (oder _Layout.cshml): 

<!-- Reference to the jqueryval bundle -->
@Scripts.Render("~/bundles/jqueryval")

<!-- jQuery to apply bootstrap validation classes and glyphicons to inputs -->
<script type="text/javascript">
    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback'); // red highlighting
            $(element).closest('.form-group').find('.form-control-feedback').removeClass('glyphicon-ok').addClass('glyphicon-remove'); // red cross glyphicon
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback'); // green highlighting
            $(element).closest('.form-group').find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok'); // green tick glyphicon
        }
    });
</script>

Fügen Sie den relevanten Feldern des Modells Datenanmerkungen hinzu: 

using System.ComponentModel.DataAnnotations;

[Required(ErrorMessage = "This field is required.")

Fügen Sie in der Ansicht zu jeder Eingabe, die überprüft werden muss, Folgendes hinzu: 

<!-- Validation messages -->
<div class="text-danger">@Html.ValidationMessageFor(m => m.SomeField)</div>

<!-- Bootstrap feedback span: -->
<span class="glyphicon form-control-feedback"></span>

Fügen Sie der relevanten Controller-Aktion Folgendes hinzu, um die serverseitige Validierung hinzuzufügen: 

if (!ModelState.IsValid)
{
    return View(model);
}
else
{
    // continue with action
}

Beispieleingabe, für die eine Überprüfung erforderlich ist

Modell: 

[Required(ErrorMessage = "This field is required.")
[StringLength(maximumLength: 10, ErrorMessage = "This field must be 10 characters or less.")]
public string SomeRequiredField { get; set; }

Aussicht: 

<div class="form-group has-feedback">
    <div class="col-md-4">
        @Html.LabelFor(m => m.SomeRequiredField, new { @class = "control-label" })
    </div>
    <div class="col-md-8">
        @Html.TextBoxFor(m => m.SomeRequiredField, new { @class = "form-control" })
        <div class="text-danger">@Html.ValidationMessageFor(m => m.SomeRequiredField)</div>
        <span class="glyphicon form-control-feedback"></span>
    </div>
</div>

Wahlweise

Fügen Sie die folgende jQuery hinzu, um die Eingaben für Unschärfe sowie beim Senden zu überprüfen: 

$('input').on('blur', function () {
    $(this).valid();
});


Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow