Ненавязчивая пользовательская проверка ASP .Net MVC 3 - PullRequest
17 голосов
/ 29 января 2011

Я использую плагин проверки jquery уже пару лет, но это моя первая попытка смешать с ненавязчивой проверкой MVC 3.

Информация на стороне клиента разбросана по всему Интернету итрудно найти что-то достаточно глубокое, чтобы объяснить это людям, которые еще не использовали его.Я целый час горю Google, чтобы найти пример того, как создать пользовательский валидатор на стороне клиента.

@Html.TextBoxFor(model => Model.CCPayment.CardNumber, new { @class = "textInput validateCreditCard", maxLength = "20" })

$(document).ready(function () {
      jQuery.validator.unobtrusive.adapters.add('validateCreditCard', {}, function (value, element) {
        alert('foo');
    });
});

, если я запускаю приведенный выше код в нижней части окна, это абсолютно ничего не делает.Я даже пробовал jquery.validator.addmethod () и до сих пор ничего.Вся проверка на стороне клиента, отправляемая из моих аннотаций проверки модели, работает нормально.

<div class="ctrlHolder">
                <label>
                    <em>*</em>
                    Card Number:
                </label>
                @Html.TextBoxFor(model => Model.CCPayment.CardNumber, new { @class = "textInput validateCreditCard", maxLength = "20" })

                <p class="field-validation-valid formHint" data-valmsg-for="CCPayment.CardNumber"></p>
             </div>

Ответы [ 2 ]

26 голосов
/ 29 января 2011

Вот как вы могли бы продолжить.Сначала вам нужно написать собственный атрибут валидатора, чтобы убедиться, что проверка выполняется на стороне сервера.Вы можете использовать тот, который описан в этом блоге :

public class CreditCardAttribute : ValidationAttribute, IClientValidatable
{
    private CardType _cardTypes;
    public CardType AcceptedCardTypes
    {
        get { return _cardTypes; }
        set { _cardTypes = value; }
    }

    public CreditCardAttribute()
    {
        _cardTypes = CardType.All;
    }

    public CreditCardAttribute(CardType AcceptedCardTypes)
    {
        _cardTypes = AcceptedCardTypes;
    }

    public override bool IsValid(object value)
    {
        var number = Convert.ToString(value);

        if (String.IsNullOrEmpty(number))
            return true;

        return IsValidType(number, _cardTypes) && IsValidNumber(number);
    }

    public override string FormatErrorMessage(string name)
    {
        return "The " + name + " field contains an invalid credit card number.";
    }

    public enum CardType
    {
        Unknown = 1,
        Visa = 2,
        MasterCard = 4,
        Amex = 8,
        Diners = 16,

        All = CardType.Visa | CardType.MasterCard | CardType.Amex | CardType.Diners,
        AllOrUnknown = CardType.Unknown | CardType.Visa | CardType.MasterCard | CardType.Amex | CardType.Diners
    }

    private bool IsValidType(string cardNumber, CardType cardType)
    {
        // Visa
        if (Regex.IsMatch(cardNumber, "^(4)")
            && ((cardType & CardType.Visa) != 0))
            return cardNumber.Length == 13 || cardNumber.Length == 16;

        // MasterCard
        if (Regex.IsMatch(cardNumber, "^(51|52|53|54|55)")
            && ((cardType & CardType.MasterCard) != 0))
            return cardNumber.Length == 16;

        // Amex
        if (Regex.IsMatch(cardNumber, "^(34|37)")
            && ((cardType & CardType.Amex) != 0))
            return cardNumber.Length == 15;

        // Diners
        if (Regex.IsMatch(cardNumber, "^(300|301|302|303|304|305|36|38)")
            && ((cardType & CardType.Diners) != 0))
            return cardNumber.Length == 14;

        //Unknown
        if ((cardType & CardType.Unknown) != 0)
            return true;

        return false;
    }

    private bool IsValidNumber(string number)
    {
        int[] DELTAS = new int[] { 0, 1, 2, 3, 4, -4, -3, -2, -1, 0 };
        int checksum = 0;
        char[] chars = number.ToCharArray();
        for (int i = chars.Length - 1; i > -1; i--)
        {
            int j = ((int)chars[i]) - 48;
            checksum += j;
            if (((i - chars.Length) % 2) == 0)
                checksum += DELTAS[j];
        }

        return ((checksum % 10) == 0);
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        yield return new ModelClientValidationRule
        {
            ErrorMessage = this.ErrorMessage,
            ValidationType = "creditcard"
        };
    }
}

Обратите внимание, что я изменил его, чтобы он реализовал интерфейс IClientValidatable, и добавилметод GetClientValidationRules, который просто использует то же сообщение об ошибке для проверки клиента, что и на стороне сервера, и предоставляет уникальное имя для этого валидатора, которое будет использоваться ненавязчивым адаптером jquery.Теперь осталось только украсить свойство модели с помощью этого атрибута:

[CreditCard(ErrorMessage = "Please enter a valid credit card number")]
[Required]
public string CardNumber { get; set; }

и на ваш взгляд:

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        jQuery.validator.unobtrusive.adapters.addBool('creditcard');
    });
</script>

@using (Html.BeginForm())
{
    @Html.TextBoxFor(x => x.CardNumber)
    @Html.ValidationMessageFor(x => x.CardNumber)
    <input type="submit" value="OK" />
}
2 голосов
/ 29 января 2011

Вам нужно ValidateFor в дополнение к TextBoxFor.Я не могу сказать по твоему вопросу, если ты уже сделал это или нет.Вам также нужно EnableClientValidation перед формой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...