2018-8-10-win10-uwp-验证输入-自定义用户控件

title	author	date	CreateTime	categories
win10 uwp 验证输入 自定义用户控件	lindexi	2018-08-10 19:16:51 +0800	2018-2-13 17:23:3 +0800	Win10 UWP

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来显示最大长度、现在字符长度

我们的TextBlock的名称remainingCharacters，在输入变化修改

        private void UpdateRemainingCharacters()
        {
            //判断不为空
            if (this.remainingCharacters != null)
            {
                //如果最大长度==0，不显示
                if (this.MaxLength == 0)
                {
                    this.remainingCharacters.Visibility = Visibility.Collapsed;
                    return;
                }

                //Text是现在字符，我们用一个新字符串来得到
                var remainingChar = string.Format("{0}/{1}", this.Text.Length, this.MaxLength);

                this.remainingCharacters.Text = remainingChar;

                //这句是没用
                this.remainingCharacters.Visibility = this.MaxLength > 0 ? Visibility.Visible : Visibility.Collapsed;
            }
        }

上面是大神写的，我建议可以简单一点。

        private void UpdateRemainingCharacters()
        {
            if (remainingCharacters != null)
            {
                if (MaxLength == 0)
                {
                    remainingCharacters.Visibility = Visibility.Collapsed;
                    return;
                }
                int length = 0;
                if (!string.IsNullOrEmpty(Text))
                {
                    length = Text.Length;
                }
                var remainingChar = string.Format("{0}/{1}", length, MaxLength);

                remainingCharacters.Text = remainingChar;

                //The above has judge the MaxLength ,and if it's 0,the Visibility will Collapsed
                //上面代码有判断MaxLength，如果是0，隐藏
                //this.remainingCharacters.Visibility = this.MaxLength > 0 ? Visibility.Visible : Visibility.Collapsed;
            }
        }

是否要检查

我们先判断是否要检查，如果不要检查，那么就返回对

return !IsMandatory;

如果要检查，我们的输入是空，我们要提示用户输入

            if (!this.IsMandatory && string.IsNullOrWhiteSpace(this.Text))
            {
                ValidationTextBlock.Text = this.MandatoryValidationMessage;
            }

上面代码的 ValidationTextBlock 就是提示

我们判断，如果输入不是空，就返回规则判断。

于是我们改为 如果不检查或输入是不空的，返回true。如果输入不是为空，继续使用规则代码

ValidationTextBlock.Text = this.MandatoryValidationMessage;

总的代码请看：

        public bool IsMandatoryFieldValid()
        {
            //不检查 || 输入不是空
            //如果不检查，true
            //如果检查 如果输入不是空 true
            if (!this.IsMandatory || !string.IsNullOrWhiteSpace(this.Text))
            {
                return true;
            }

            if (this.ValidationTextBlock != null)
            {
                this.ValidationTextBlock.Text = this.MandatoryValidationMessage;
            }

            VisualStateManager.GoToState(this, "Mandatory", true);
            return false;
        }

长度

我们通过检查验证，我们继续判断，这时我们可以检查长度 Text.Length > this.MaxLength ，如果大于长度，不通过，提示用户。

            bool[] isInvalid = { !this.IsMandatoryFieldValid() };

            if (!isInvalid[0])
            {
                if (this.MaxLength > 0)
                {
                    isInvalid[0] = this.Text.Length > this.MaxLength;
                }

                if (isInvalid[0])
                {
                    if (this.ValidationTextBlock != null)
                    {
                        this.ValidationTextBlock.Text = "The text exceeds the maximum length.";
                    }
                }
            }    //不知道isInvalid

判断

如果输入长度不大于最大可以接受的输入，我们判断是否符合要求，这样写是因为判断长度的速度比后面的判断快

                    if (ValidationRules != null)
                    {
                        foreach (var temp in ValidationRules.Rules)
                        {
                            isInvalid[0] = !temp.IsValid(Text);
                            if (isInvalid[0] && ValidationTextBlock != null)
                            {
                                ValidationTextBlock.Text = temp.ErrorMessage;
                                break;
                            }
                        }
                    }

大神写的使用TakeWhile，这函数判断所有的值符合条件。

           if (!isInvalid[0])
            {
                if (this.MaxLength > 0)
                {
                    isInvalid[0] = this.Text.Length > this.MaxLength;
                }

                if (isInvalid[0])
                {
                    if (this.ValidationTextBlock != null)
                    {
                        this.ValidationTextBlock.Text = "The text exceeds the maximum length.";
                    }
                }
                else
                {
                    if (this.ValidationRules != null)
                    {
                        // Run through all of the validation rules for this text box and check is valid.
                        foreach (var rule in this.ValidationRules.Rules.TakeWhile(rule => !isInvalid[0]))
                        {
                            isInvalid[0] = !rule.IsValid(this.Text);

                            if (isInvalid[0] && this.ValidationTextBlock != null)
                            {
                                this.ValidationTextBlock.Text = rule.ErrorMessage;
                            }
                        }
                    }

                    //if (ValidationRules != null)
                    //{
                    //    foreach (var temp in ValidationRules.Rules)
                    //    {
                    //        isInvalid[0] = !temp.IsValid(Text);
                    //        if (isInvalid[0] && ValidationTextBlock != null)
                    //        {
                    //            ValidationTextBlock.Text = temp.ErrorMessage;
                    //            break;
                    //        }
                    //    }
                    //}
                }
            }

我们需要把判断放到IsInvalid，IsInvalid = isInvalid[0];

我们把上面写的做函数，输入改变我们使用更新来做判断。因为这个函数是所有的输入都调用，所以可能规则比较慢就会让用户难以输入。

        private void OnTextChanged(object sender, TextChangedEventArgs args)
        {
            this.Update();
        }

如何写检查

我们的核心就是它，我们需要一个类来放用户写的检查

这类我就放public List<ValidationRule> Rules { get; private set; }

开始核心ValidationRule，我们有很多检查，我们需要一个ValidationRule，定义的检查都可以修改ValidationRule新检查

ValidationRule只有一个属性，错误显示的Message

        private string _errorMessage;

        public string ErrorMessage
        {
            set
            {
                this._errorMessage = value;
            }
            get
            {
                return string.IsNullOrWhiteSpace(this._errorMessage) ? "Field invalid." : this._errorMessage;
            }
        }

其实如果_errorMessage不存在，我们要返回默认的，不要返回"Field invalid."

        /// <summary>
        /// If the errorMessage is null
        /// return DefaultErrorMessage
        /// </summary>
        public static string DefaultErrorMessage
        {
            set;
            get;
        } = "Field invalid.";

        private string _errorMessage;

        /// <summary>
        /// Gets the error message to display for the rule.
        /// </summary>
        public string ErrorMessage
        {
            set
            {
                this._errorMessage = value;
            }
            get
            {
                return string.IsNullOrWhiteSpace(this._errorMessage) ? DefaultErrorMessage : this._errorMessage;
            }
        }

然后就是一个函数，判断是否通过

public abstract bool IsValid(object value);

然后我们可以开始做检查

如 DateTime 的判断

        public override bool IsValid(object value)
        {
            if (value == null)
            {
                return false;
            }

            var val = value.ToString();
            if (string.IsNullOrWhiteSpace(val))
            {
                return true;
            }

            DateTime temp;
            return DateTime.TryParse(val, out temp);
        }

还有数字 decimal 判断

        public override bool IsValid(object value)
        {
            if (value == null)
            {
                return false;
            }

            var val = value.ToString();
            if (string.IsNullOrWhiteSpace(val))
            {
                return true;
            }

            decimal temp;
            return decimal.TryParse(val, out temp);
        }

用户控件

我们使用继承TextBox做自己的控件

public partial class ValidatingTextBox : TextBox

我们上面用了remainingCharacters ValidationTextBlock 我们需要把它显示

我们告诉后来写 ControlTemplate 我们要remainingCharactersTextBlock ValidationTextBlock这两个，我们给 xaml 写的资源名字 RemainingCharacters，ValidationText ，我们就可以在 OnApplyTemplate 获得这两个属性

        protected override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            this.remainingCharacters = this.GetTemplateChild("RemainingCharacters") as TextBlock;
            this.ValidationTextBlock = this.GetTemplateChild("ValidationText") as TextBlock;
        }

但我们需在ValidatingTextBox 的类上面写下面的代码，告诉 xaml 需要有这两个属性，虽然不写也是不会报错的，但是一般都会写。

    [TemplatePart(Name = "ValidationText", Type = typeof(TextBlock))]
    [TemplatePart(Name = "RemainingCharacters", Type = typeof(TextBlock))]

垃圾wr做这是是支持做界面的人和做逻辑可以两个。，做界面只要知道有那些控件就好
TemplatePart 是告诉做界面，我的需要名字为 Name，类型为什么的控件，你要做前台写这个控件。

写完了界面，我们还需加事件，获得文字修改

       protected override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            this.remainingCharacters = this.GetTemplateChild("RemainingCharacters") as TextBlock;
            this.ValidationTextBlock = this.GetTemplateChild("ValidationText") as TextBlock;

            this.Update();

            if (!this.IsTemplateApplied)
            {
                this.TextChanged += this.OnTextChanged;
                this.IsEnabledChanged += this.OnIsEnabledChanged;

                this.IsTemplateApplied = true;
            }
        }

我们设Style，他没有Key，这样所有的控件都使用我们写的 Style

我们新建一个资源，只要里面有<Style TargetType="controls:ValidatingTextBox">

我们用新建副本，直接复制TextBox的Style，不需要做什么修改。

我们在下面，修改显示

我们需要一个Head、一个显示字符数、一个验证，TextBlock

但是还记得我们约定，需要显示字符数的名字RemainingCharacters，显示验证名字ValidationText

于是我们使用布局，直接放TextBlock，于是我们的控件做好。

有一些比较难说我没有说，请去看代码 http://git.oschina.net/lindexi/WinUX-UWP-Toolkit