WPF --- TextBox的輸入校驗

NiueryDiary發表於2023-11-16

引言

在WPF應用程式開發中，資料校驗是確保使用者輸入資料的正確性和完整性的重要一環。

之前在做一些引數配置功能時，最是頭疼各種引數校驗，查閱一些資料後，我總結了資料校驗方式有兩種：

  • ValidationRule
  • IDataErrorInfo

接下來分別介紹這兩種校驗方式。

ValidationRule

ValidationRule 是一個抽象類，提供了抽象方法 Validate(), 它是WPF中用於資料驗證的一種機制，它可以在使用者輸入資料之前或之後執行自定義的驗證邏輯。可以輕鬆地實現對資料的格式、範圍、邏輯等方面的驗證，並在驗證失敗時提供相應的反饋資訊。

ValidationRule主要作用域在前端頁面上。

基本用法

首先建立一個 ValidationRule，我這裡設定了兩個屬性 MaxVal、MinVal，然後在 Validate() 方法中判斷空、判斷大於上限或小於下限，然後在符合條件是，返回 ValidationResult，並給出錯誤提示：

public class IntegerValidationRule : ValidationRule
{
    public int MaxVal { get; set; }
    public int MinVal { get; set; }

    public override ValidationResult Validate(object value, CultureInfo cultureInfo)
    {
        string text = value as string;

        if (!int.TryParse(text, out int result))
        {
            return new ValidationResult(false, "Text cannot be empty.");
        }

        if (result > MaxVal)
        {
            return new ValidationResult(false, "Value out of upper limit range.");
        }

        if (result < MinVal)
        {
            return new ValidationResult(false, "Value out of lower limit range.");
        }

        return ValidationResult.ValidResult;
    }
}

接下來建立有個測試使用的 ViewModel:

public class TestViewModel : INotifyPropertyChanged
{
    private TestViewModel() { }

    public static TestViewModel Instance { get; } = new TestViewModel();

    public event PropertyChangedEventHandler? PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private int testField1;
    /// <summary>
    /// 測試屬性1
    /// </summary>
    public int TestField1
    {
        get => testField1;
        set
        {
            testField1 = value;
            OnPropertyChanged(nameof(TestField1));
        }
    }

    private int testField2;
    /// <summary>
    /// 測試屬性2
    /// </summary>
    public int TestField2
    {
        get => testField2;
        set
        {
            testField2 = value;
            OnPropertyChanged(nameof(TestField2));
        }
    }
}

在測試之前，我們可以先看一下 Binding 的方法列表：

image.png

可以看到 ValidationRules 是 Binding 下的集合，這意味著 ValidationRule 是在 Binding 下使用且可以執行多個校驗規則。校驗時按照順序依次校驗。

接下來我們建立一個WPF應用程式，在介面新增 TextBox，命名為”textbox1“,將文字繫結在 TestViewModel 的 TestField1。

且為Validation.ErrorTemplate 繫結一個模板，這裡繫結了一個紅色的感嘆號。

然後為 TextBox 設定觸發器，當 Validation.HasError為 true時，將 ToolTip 繫結校驗失敗的錯誤提示。

程式碼如下：

<Window
    x:Class="WpfApp4.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:WpfApp4"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="900"
    Height="450"
    mc:Ignorable="d">
    <Window.Resources>
        <ControlTemplate x:Key="ValidationTemplate">
            <DockPanel>
                <TextBlock
                    Margin="-10,0,0,0"
                    VerticalAlignment="Center"
                    FontSize="22"
                    Foreground="Red"
                    Text="!" />

            </DockPanel>
        </ControlTemplate>

        <Style TargetType="TextBox">
            <Style.Triggers>
                <Trigger Property="Validation.HasError" Value="true">
                    <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0">
            <TextBlock
                HorizontalAlignment="Center"
                FontSize="18"
                FontWeight="Bold"
                Text="Validation Demo" />
            <TextBox
                Name="textBox1"
                Height="30"
                Margin="10"
                FontSize="22"
                Validation.ErrorTemplate="{StaticResource ValidationTemplate}">
                <TextBox.Text>
                    <Binding Path="TestField1" UpdateSourceTrigger="PropertyChanged">
                        <Binding.ValidationRules>
                            <local:IntegerValidationRule
                                MaxVal="999"
                                MinVal="5" />
                        </Binding.ValidationRules>
                    </Binding>
                </TextBox.Text>
            </TextBox>

        </StackPanel>
    </Grid>
</Window>

最後在窗體後臺繫結 ViewModel:

public MainWindow()
{
    InitializeComponent();
    this.DataContext =  TestViewModel.Instance;
}

測試

  1. 為空時，出現紅色歎號，ToolTip 提示 "Text cannot be empty."
    image.png

  2. 小於下限時，出現紅色歎號，ToolTip 提示 "Value out of lower limit range."
    image.png

  3. 大於上限時，出現紅色歎號，ToolTip 提示 "Value out of upper limit range."
    image.png

IDataErrorInfo

IDataErrorInfo 是一個介面，Viewmodel 實現介面用於在後臺，提供資料驗證和錯誤資訊。

IDataErrorInfo 主要作用域為後臺 ViewModel
該介面包含兩個成員：Error 和 this[string columnName]。這兩個成員允許你在資料繫結時提供驗證錯誤資訊。

基本用法

接下來，在程式裡新增 TextBox，命名為”textbox2“，並新增一個 TextBlock 繫結 Error 展示在介面。

<StackPanel Grid.Column="1">
    <TextBlock
        HorizontalAlignment="Center"
        FontSize="18"
        FontWeight="Bold"
        Text="IDataErrorInfo Demo" />
    <TextBox
        Name="textBox2"
        Margin="10"
        VerticalAlignment="Center"
        FontSize="22"
        Text="{Binding TestField2, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" />
     <TextBlock
         HorizontalAlignment="Center"
         FontSize="18"
         FontWeight="Bold"
         Foreground="Red"
         Text="{Binding Error, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>

後臺 TestViweModel 實現 IDataErrorInfo，依舊是判斷上限值和下限值，此處不判斷空，是因為後臺 TestField2 型別是Int，為空時不會賦值，程式碼如下：

public class TestViewModel : INotifyPropertyChanged, IDataErrorInfo
{
    //省略上文已有程式碼..。
    
    private string error;
    public string Error
    {
        get => error;
        set
        {
            error = value; OnPropertyChanged(nameof(Error));
        }
    }
    public string this[string columnName]
    {
        get
        {
            switch (columnName)
            {
                case nameof(TestField2):
                    return CheckTestFild2();
                default:
                    return null;
            }
        }
    }

    public int MaxVal = 999;
    public int MinVal = 5;

    private string CheckTestFild2()
    {
        if (TestField2 > MaxVal)
        {
            Error = "Value out of upper limit range in viewmodel.";
        }
        else if (TestField2 < MinVal)
        {
            Error = "Value out of lower limit range  in viewmodel.";
        }
        else
        {
            Error = string.Empty;
        }
        
        return Error;
    }
}

測試

  1. 小於下限時，出現紅色文字提示，ToolTip 提示 "Value out of lower limit range in viewmodel."
    image.png

  2. 大於上限時，出現紅色文字提示，ToolTip 提示 "Value out of upper limit range in viewmodel."
    image.png

小結

以上兩種資料校驗（IDataErrorInfo、ValidationRule）的方式，均可以實現自定義資料校驗，例如對資料的格式、範圍、邏輯等方面的驗證，並在驗證失敗時提供相應的反饋資訊。

ValidationRule適用於在介面做資料校驗，且可以定義多個校驗規則。

ValidationRule適用於在ViewModel做資料校驗，可以做一些無法在前端頁面做的事情，比如出現異常值是還原為預設值。

所以兩者既可以單獨使用，也可以組合使用，即使使用MVVM模式，依舊能夠優雅的做資料校驗。

相關文章