大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Xamarin.Forms登录对话框及表单验证怎么实现

本篇内容主要讲解“Xamarin.Forms登录对话框及表单验证怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Xamarin.Forms登录对话框及表单验证怎么实现”吧!

为白城等地区用户提供了全套网页设计制作服务,及白城网站建设行业解决方案。主营业务为成都网站建设、网站建设、白城网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

1.实现效果

Xamarin.Forms登录对话框及表单验证怎么实现  
弹出登录窗口,输入验证

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 工程结构

Xamarin.Forms登录对话框及表单验证怎么实现

3.3 共享库中的MainPage

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


   

后台弹出登录窗口 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
   {
       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(ref T backingStore, T value,
           [CallerMemberName]string propertyName = "",
           Action onChanged = null)
       {
           if (EqualityComparer.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”


                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">
   
       
           #2196F3
       

   


   
                                         DurationOut="300"
                                  EasingIn="SinOut"
                                  EasingOut="SinIn"
                                  HasBackgroundAnimation="True"
                                  PositionIn="Center"
                                  PositionOut="Center"
                                  ScaleIn="1.2"
                                  ScaleOut="0.8" />
   


   
       
           
               
                                     PlaceholderColor="#bababa" FontSize="16"/>
                                     PlaceholderColor="#bababa" FontSize="16"/>
               

后台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

Xamarin.Forms登录对话框及表单验证怎么实现

注册弹出插件 

3.8 iOS项目中的AppDelegate.cs

Xamarin.Forms登录对话框及表单验证怎么实现

到此,相信大家对“Xamarin.Forms登录对话框及表单验证怎么实现”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


当前文章:Xamarin.Forms登录对话框及表单验证怎么实现
当前地址:http://dzwzjz.com/article/gscocj.html
在线咨询
服务热线
服务热线:028-86922220
TOP