demoshop

demo, trying to be the best_

此篇文系列文的第四篇,接者介紹自訂驗證規則的方法,這次介紹的是屬於「範圍驗證」範圍驗證是一個很常使用到的驗證規則,比如數值的最大值最小值或是字串的最短長度和最長長度但很巧的這些都內建了...使用 Range 可以驗證數值範圍,使用 StringLength 可以驗證字串長度,不巧的是我想不出其他範例....所以只好上網搜尋範例

demo廢言如同上面所說的內建的 Range 和 StringLength 已經吃掉了95% 以上的需求,因此這次的範例是日期範圍的驗證,假設我們的網站在報名的時候可以選擇七天內的某一天來免費做體驗課程,那就可以利用本範例的日期範圍驗證了(或許很牽強不過重點不在這裡)

●一開始當然是建立日期範圍的類別 DayRangeAttribute 因為已經是第四篇了,所以直接貼上 Code

public class DayRangeAttribute : ValidationAttribute, IClientValidatable
{
    private int minimumDays;
    private int maximumDays;

    /// <summary>
    /// 日期範圍驗證<para>只驗證日期,不考慮時間</para>
    /// </summary>
    /// <param name="minimumDays">最小日期</param>
    /// <param name="maximumDays">最大日期</param>
    public DayRangeAttribute(int minimumDays, int maximumDays)
    {
        //日期範圍基本的輸入參數驗證
        if (minimumDays.CompareTo(maximumDays) > -1)
        {
            throw new Exception("範圍設定錯誤,最小日期不得大於等於最大日期");
        }

        this.minimumDays = minimumDays;
        this.maximumDays = maximumDays;
    }
    public override bool IsValid(object value)
    {
        if (value == null)
            return true;

        var compareDate = value as DateTime?;
        if (compareDate.HasValue)
        {
            compareDate = compareDate.Value.Date;
            return compareDate.Value >= DateTime.Today.AddDays(minimumDays).Date && compareDate.Value <= DateTime.Today.AddDays(maximumDays).Date;
        }
        return false;
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientValidationRule
        {
            ValidationType = "dayrange",
            ErrorMessage = FormatErrorMessage(metadata.GetDisplayName())
        };
        rule.ValidationParameters["min"] = minimumDays;
        rule.ValidationParameters["max"] = maximumDays;
        yield return rule;
    }
}

注意事項這次的輸入參數有兩個 min 和 max 記得都要加上去阿,當然一樣是小寫限定


●回到熟悉的 AccountModels 內的 RegisterModel 增加一個新屬性

[DayRange(0, 7)]
[Display(Name = "選擇上課日")]
public DateTime Date { get; set; }

並且為 Date 屬性加上剛剛擴充出來的日期範圍驗證,設定為今天開始到七天後的範圍是可以選取的


注意事項依照慣例現在就是擴充前端驗證 javascript 的時候了,但是因為這範例是日期,而日期這玩意有許多種的輸入方式

  • 2011-07-15
  • 2011-7-15
  • 2011/07/15
  • 2011/7/15
  • 2011.07.15
  • 2011.7.15

以上這些全對!但是如果開放使用者都可以輸入的話驗證就有得寫了,所以強烈建議當需要使用日期欄位的時候最好使用 Date Picker 來做,如果你沒有習慣使用的而且你的需求很簡單,那就可以試試看 jQuery Date Input 日期選擇器 | demo小鋪 ,限定了輸入的格式後就可以更容易的寫驗證了。

<script type="text/javascript">
    jQuery.validator.addMethod('dayrange', function (value, element, param) {
        if (!value) return false;
        var valueDateParts = value.split('-');
        var minDate = new Date();
        var maxDate = new Date();
        var now = new Date();
        var dateValue = new Date(valueDateParts[2],
                            (valueDateParts[1] - 1),
                             valueDateParts[0],
                             now.getHours(),
                             now.getMinutes(),
                             (now.getSeconds() + 5));

        minDate.setDate(minDate.getDate() - parseInt(param.min));
        maxDate.setDate(maxDate.getDate() + parseInt(param.max));

        return dateValue >= minDate && dateValue <= maxDate;
    });
     jQuery.validator.unobtrusive.adapters.addMinMax('dayrange', 'min', 'max', 'dayrange');
</script>

注意事項以上 script 將輸入值使用了 「-」來切,如果您的日期格式不同請自行配合修改


●驗證就給它擴充結束啦

回應討論