twitter-bootstrap
Проверка бутстрапа

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

замечания

Этот метод валидации можно использовать только на входах, которые находятся внутри формы.
Свойства должны иметь хотя бы одно требование проверки, чтобы показывать выделение при неудачной onSubmit() . Типы данных (кроме строки) имеют требование скрытого типа данных, поэтому не требуют явной аннотации данных. Строки не имеют этого, поэтому для принудительной проверки проверки вместе с другими полями добавьте аннотацию данных [MinLengthAttribute(0)] .

Использование ASP.NET MVC и аннотации данных

Добавьте в Web.config (в папке Views) <appSettings> : <appSettings> :

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

Добавьте пакет jqueryval в BundleConfig.cs:

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

Добавьте все страницы, требующие проверки (или _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>

Добавьте аннотации данных в соответствующие поля в модели:

using System.ComponentModel.DataAnnotations;

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

В представлении добавьте следующее для каждого ввода, который требует проверки:

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

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

Добавьте дополнение к соответствующему действию контроллера для добавления проверки на стороне сервера:

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

Пример ввода, требующий проверки

Модель:

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

Посмотреть:

<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>

Необязательный

Добавьте следующий jQuery для проверки входов при размытии, а также для отправки:

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

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow