Xamarin.Forms登录对话框及表单验证

Posted dotnet9-com

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Xamarin.Forms登录对话框及表单验证相关的知识，希望对你有一定的参考价值。

微信公众号：Dotnet9，网站：Dotnet9，问题或建议，请网站留言；
如果您觉得Dotnet9对您有帮助，欢迎赞赏。

Xamarin.Forms登录系统

内容目录

  1. 实现效果
  2. 业务场景
  3. 编码实现
  4. 本文参考
  5. 源码下载

1.实现效果

弹出登录窗口，输入验证
技术图片

2.业务场景

  1. 主窗口弹出登录或者其他小窗口
  2. 表单验证

3.编码实现

3.1 添加Nuget库

创建名为 “LoginSystem” 的Xamarin.Forms项目，添加2个Nuget库

  1. Rg.Plugins.Popup 1.2.0.223：弹出框由该插件提供
  2. FluentValidation 8.6.1：表单验证使用

3.2 工程结构

技术图片

3.3 共享库中的MainPage

弹出登录窗口，MainPage.xaml中关键代码

<StackLayout VerticalOptions="Center">
    <Button Text="登录" BackgroundColor="#2196F3" Clicked="Login_Click"/>
</StackLayout>

后台弹出登录窗口 MainPage.xaml.cs

private async void Login_Click(object sender, EventArgs e)
{
    await PopupNavigation.Instance.PushAsync(new LoginPage());
}

3.4 Models中类文件

3.4.1 LoginUser.cs

namespace LoginSystem.Models
{
    class LoginUser
    {
        public string UserName { get; set; }
        public string Password { get; set; }
    }
}

3.4.2 LoginUserValidator.cs

使用FluentValidation进行实体规则验证

using FluentValidation;

namespace LoginSystem.Models
{
    class LoginUserValidator : AbstractValidator<LoginUser>
    {
        public LoginUserValidator()
        {
            RuleFor(x => x.UserName).NotEmpty().WithMessage("请输入账号")
                .Length(5, 20).WithMessage("账号长度在5到20个字符之间");
            RuleFor(x => x.Password).NotEmpty().WithMessage("请输入密码");
        }
    }
}

3.4.3 NotifyPropertyChanged.cs

封装INotifyPropertyChanged接口

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace LoginSystem.Models
{
    public class NotifyPropertyChanged : INotifyPropertyChanged
    {
        protected bool SetProperty<T>(ref T backingStore, T value,
            [CallerMemberName]string propertyName = "",
            Action onChanged = null)
        {
            if (EqualityComparer<T>.Default.Equals(backingStore, value))
                return false;

            backingStore = value;
            onChanged?.Invoke();
            OnPropertyChanged(propertyName);
            return true;
        }

        #region INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            var changed = PropertyChanged;
            if (changed == null)
                return;

            changed.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }
}

3.5 ViewModel中类文件

3.5.1 LoginViewModel.cs

登录视图的ViewModel，FluentValidation的具体调用

using FluentValidation;
using LoginSystem.Models;
using System;
using System.Threading.Tasks;
using System.Windows.Input;
using Xamarin.Forms;

namespace LoginSystem.ViewModel
{
    class LoginViewModel : NotifyPropertyChanged
    {
        public INavigation Navigation { get; set; }

        public LoginUser LoginUserIns { get; set; }

        string userName = string.Empty;
        public string UserName
        {
            get { return userName; }
            set { SetProperty(ref userName, value); }
        }

        string password = string.Empty;
        public string Password
        {
            get { return password; }
            set { SetProperty(ref password, value); }
        }

        private readonly IValidator _validator;
        public LoginViewModel()
        {
            _validator = new LoginUserValidator();
        }
        private ICommand loginCommand;
        public ICommand LoginCommand
        {
            get
            {
                return loginCommand ?? (loginCommand = new Command(ExecuteLoginCommand));
            }
        }
        private string validateMsg;
        public string ValidateMsg
        {
            get
            {
                return validateMsg;
            }
            set
            {
                SetProperty(ref validateMsg, value);
            }
        }
        private async void ExecuteLoginCommand(object obj)
        {
            try
            {
                if (LoginUserIns == null)
                {
                    LoginUserIns = new LoginUser();
                }
                LoginUserIns.UserName = userName;
                LoginUserIns.Password = password;
                var validationResult = _validator.Validate(LoginUserIns);
                if (validationResult.IsValid)
                {
                    //TODO 作服务端登录验证
                    ValidateMsg = "登录成功!";
                }
                else
                {
                    if (validationResult.Errors.Count > 0)
                    {
                        ValidateMsg = validationResult.Errors[0].ErrorMessage;
                    }
                    else
                    {
                        ValidateMsg = "登录失败!";
                    }
                }
            }
            catch (Exception ex)
            {
                ValidateMsg = ex.Message;
            }
            finally
            {

            }
            await Task.FromResult("");
        }
    }
}

3.6 Views中的视图文件

3.6.1 LoginPage

登录窗口LoginPage.xaml，引入弹出插件Rg.Plugins.Popup，设置弹出框动画，绑定FluentValidation验证提示信息 “ValidateMsg”

<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                 xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
                 xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
                 mc:Ignorable="d"
             x:Class="LoginSystem.Views.LoginPage">
    <pages:PopupPage.Resources>
        <ResourceDictionary>
            <Color x:Key="Primary">#2196F3</Color>
        </ResourceDictionary>
    </pages:PopupPage.Resources>

    <pages:PopupPage.Animation>
        <animations:ScaleAnimation DurationIn="400"
                                   DurationOut="300"
                                   EasingIn="SinOut"
                                   EasingOut="SinIn"
                                   HasBackgroundAnimation="True"
                                   PositionIn="Center"
                                   PositionOut="Center"
                                   ScaleIn="1.2"
                                   ScaleOut="0.8" />
    </pages:PopupPage.Animation>

    <Grid VerticalOptions="Center" Margin="40,20" HeightRequest="400">
        <Frame CornerRadius="20" BackgroundColor="White">
            <StackLayout Spacing="20" Padding="15">
                <Image Source="person.png" HeightRequest="50" VerticalOptions="End"/>
                <Entry x:Name="entryUserName" Text="{Binding UserName}" Placeholder="账号"
                       PlaceholderColor="#bababa" FontSize="16"/>
                <Entry IsPassword="True" Text="{Binding Password}" Placeholder="密码" 
                       PlaceholderColor="#bababa" FontSize="16"/>
                <Button Margin="0,10,0,0" Text="登录" BackgroundColor="{StaticResource Primary}" 
                        TextColor="White" HeightRequest="50" VerticalOptions="Start"
                        Command="{Binding LoginCommand}"/>
                <Label Text="{Binding ValidateMsg}" TextColor="Red" HorizontalOptions="Center"/>
                <Label Text="没有账号？请联系管理员。" HorizontalOptions="Center" FontSize="12"/>
            </StackLayout>
        </Frame>
    </Grid>
</pages:PopupPage>

后台LoginPage.xaml.cs绑定ViewModel LoginViewModel，需要设置Navigation到LoginViewModel的属性Navigation，用于ViewModel中验证成功时返回主窗口使用

using LoginSystem.ViewModel;
using Rg.Plugins.Popup.Pages;
using Xamarin.Forms.Xaml;

namespace LoginSystem.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class LoginPage : PopupPage
    {
        LoginViewModel ViewModel = null;
        public LoginPage()
        {
            if (ViewModel == null)
            {
                ViewModel = new LoginViewModel();
            }
            this.BindingContext = ViewModel;
            ViewModel.Navigation = Navigation;
            InitializeComponent();
        }
    }
}

3.7 android项目中的MainActivity.cs

注册弹出插件
技术图片

3.8 ios项目中的AppDelegate.cs

注册弹出插件
技术图片

4.本文参考

Houssem Dellai 大神的学习视频：Popup in Xamarin Forms

Fluent Validation With MVVM In Xamarin Forms Application

5.代码下载

文中代码已经全部提供

除非注明，文章均由 Dotnet9 整理发布，欢迎转载。

转载请注明本文地址：https://dotnet9.com/6841.html

欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章

技术图片

以上是关于Xamarin.Forms登录对话框及表单验证的主要内容，如果未能解决你的问题，请参考以下文章

从Xamarin Forms请求Web API中的JWT时获取错误请求

Xamarin.Forms 选取器选择背景颜色

无法使用 Xamarin.Forms WebView 进行 Dropbox 身份验证

Xamarin.Forms webview 进行身份验证，导航到新页面（Shell）并需要再次重新验证？

如何使用 Xamarin.Forms 显示警报框以进行验证？

如何在 Xamarin Forms App 中实现 SSO？