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

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

微信公众号：Dotnet9，网站：Dotnet9，问题或建议，请网站留言；

如果您觉得Dotnet9对您有帮助，欢迎赞赏。

Xamarin.Forms登录系统

内容目录

实现效果
业务场景
编码实现
本文参考
源码下载

1.实现效果

弹出登录窗口，输入验证

2.业务场景

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

3.编码实现

3.1 添加Nuget库

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

Rg.Plugins.Popup 1.2.0.223：弹出框由该插件提供
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(); } } }