win10 uwp 验证输入 自定义用户控件

时间:2021-07-04 02:54:49

TextBox是给用户输入,我们有时要用户只输入数字,而用户输入汉字,我们就有提示用户,那么这东西用到次数很多,我们需要做成一个控件。

我们可以用别人的库,我找到一个大神写的库,很好用

我们使用这个库可以定义很多验证,我记录我如何使用他这个库,还有如何去修改这个库。如何自定义控件做一个和大神做的一样的控件。


Nuget

我们用这个库是jamescroft写的,他上传到Nuget,我们可以去下载

用Nuget搜索WinUX.UWP.Xaml.Controls

下载完成就好

使用库

我们经常需要验证用户输入,不是使用一个规则,是有很多规则。我们常用的规则也就几个,数字、URL……

我们下载库,有常用规则

– DateTimeValidationRule
日期规则,输入可以转日期

– DecimalValidationRule
数字,输入可以转数字

– DoubleValidationRule
输入可以转浮点

– EmailValidationRule
邮箱,输入是mail

– IntValidationRule
整形,输入可以转整形

– RegexValidationRule
我们自己定义正则,有时我们需要复杂的,要求长度

– UrlValidationRule
输入是URL

我们要在资源定义,因为我们有多条验证

先写,因为我们引用库和我的不知一空间

xmlns:validation="using:WinUX.Data.Validation" xmlns:rules="using:WinUX.Data.Validation.Rules" xmlns:controls="using:WinUX.Xaml.Controls"

在资源定义,我们需要多条,看起来好长,如果我们要用两次,那么还是写资源

<Grid.Resources> <validation:ValidationRules x:Key="UrlSample"> <validation:ValidationRules.Rules> <rules:UrlValidationRule /> </validation:ValidationRules.Rules> </validation:ValidationRules> </Grid.Resources>

下面直接抄大神写的

<controls:ValidatingTextBox IsMandatory="True" Header="Website" Text="http://www.jamescroft.co.uk" MaxLength="50" ValidationRules="{StaticResource Url}" VerticalAlignment="Center"/>

MaxLength 最大长度

ValidationRules 验证规则

IsMandatory 输入规则

MandatoryValidationMessage 输入规则提示

如果IsMandatory=true在没有输入,显示MandatoryValidationMessage

IsInvalid 输入是否对

这个值绑定到ViewModel可以得到是否可以输入到ViewModel

如果我们需要写输入错了提示

<rules:UrlValidationRule ErrorMessage="输入错"></rules:UrlValidationRule>

如果需要使用正则,我们的验证复制,需要使用RegexValidationRule,在Regex写正则

<controls:ValidatingTextBox IsMandatory="True" Header="Website" Text="" MaxLength="0" MandatoryValidationMessage="输入" VerticalAlignment="Center"> <controls:ValidatingTextBox.ValidationRules> <validation:ValidationRules> <validation:ValidationRules.Rules> <rules:RegexValidationRule Regex="mailto:\w+([-+.]\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*"></rules:RegexValidationRule> </validation:ValidationRules.Rules> </validation:ValidationRules> </controls:ValidatingTextBox.ValidationRules> <controls:ValidatingTextBox.ValidationTextBlock > <TextBlock Text="ValidationTextBlock"></TextBlock> </controls:ValidatingTextBox.ValidationTextBlock> </controls:ValidatingTextBox>

使用很简单,那么这如何做。

下面我来说下,他这个如何做,这有些复杂,我们分开来说,开始是功能

判断输入字符长度

我们需要一个TextBlock来显示最大长度、现在字符长度