Validasi

Aplikasi apa pun yang menerima input dari pengguna harus memastikan bahwa input valid. Aplikasi dapat, misalnya, memeriksa input yang hanya berisi karakter dalam rentang tertentu, memiliki panjang tertentu, atau cocok dengan format tertentu. Tanpa validasi, pengguna dapat menyediakan data yang menyebabkan aplikasi gagal. Validasi yang tepat memberlakukan aturan bisnis dan dapat membantu mencegah penyerang menyuntikkan data berbahaya.

Dalam konteks pola Model-View-ViewModel (MVVM), model tampilan atau model sering diperlukan untuk melakukan validasi data dan memberi sinyal kesalahan validasi apa pun ke tampilan sehingga pengguna dapat memperbaikinya. Aplikasi multi-platform eShop melakukan validasi properti model tampilan sisi klien yang sinkron dan memberi tahu pengguna tentang kesalahan validasi apa pun dengan menyoroti kontrol yang berisi data yang tidak valid, dan dengan menampilkan pesan kesalahan yang memberi tahu pengguna mengapa data tidak valid. Gambar di bawah ini menunjukkan kelas yang terlibat dalam melakukan validasi di aplikasi multi-platform eShop.

Lihat properti model yang memerlukan validasi berjenis ValidatableObject<T>, dan setiap ValidatableObject<T> instans memiliki aturan validasi yang ditambahkan ke propertinya Validations . Validasi dipanggil dari model tampilan dengan memanggil Validate metode ValidatableObject<T> instans, yang mengambil aturan validasi dan menjalankannya terhadap ValidatableObject<T>.Value properti . Setiap kesalahan validasi ditempatkan ke properti Errors ValidatableObject<T> instans, dan IsValid properti instans diperbarui ValidatableObject<T> untuk menunjukkan apakah validasi berhasil atau gagal. Kode berikut menunjukkan implementasi ValidatableObject<T>dari :

using CommunityToolkit.Mvvm.ComponentModel;
namespace eShop.Validations;
public class ValidatableObject<T> : ObservableObject, IValidity
{
    private IEnumerable<string> _errors;
    private bool _isValid;
    private T _value;
    public List<IValidationRule<T>> Validations { get; } = new();
    public IEnumerable<string> Errors
    {
        get => _errors;
        private set => SetProperty(ref _errors, value);
    }
    public bool IsValid
    {
        get => _isValid;
        private set => SetProperty(ref _isValid, value);
    }
    public T Value
    {
        get => _value;
        set => SetProperty(ref _value, value);
    }
    public ValidatableObject()
    {
        _isValid = true;
        _errors = Enumerable.Empty<string>();
    }
    public bool Validate()
    {
        Errors = Validations
            ?.Where(v => !v.Check(Value))
            ?.Select(v => v.ValidationMessage)
            ?.ToArray()
            ?? Enumerable.Empty<string>();
        IsValid = !Errors.Any();
        return IsValid;
    }
}

Pemberitahuan perubahan properti disediakan oleh ObservableObject kelas, sehingga Entry kontrol dapat mengikat properti IsValid ValidatableObject<T> instans di kelas model tampilan untuk diberi tahu apakah data yang dimasukkan valid atau tidak.

Menentukan aturan validasi

Aturan validasi ditentukan dengan membuat kelas yang berasal dari IValidationRule<T> antarmuka, yang ditunjukkan dalam contoh kode berikut:

public interface IValidationRule<T>
{
    string ValidationMessage { get; set; }
    bool Check(T value);
}

Antarmuka ini menentukan bahwa kelas aturan validasi harus menyediakan metode boolean Check yang digunakan untuk melakukan validasi yang ValidationMessage diperlukan, dan properti yang nilainya adalah pesan kesalahan validasi yang akan ditampilkan jika validasi gagal.

Contoh kode berikut menunjukkan IsNotNullOrEmptyRule<T> aturan validasi, yang digunakan untuk melakukan validasi nama pengguna dan kata sandi yang dimasukkan oleh pengguna pada LoginView saat menggunakan layanan tiruan di aplikasi multi-platform eShop:

public class IsNotNullOrEmptyRule<T> : IValidationRule<T>
{
    public string ValidationMessage { get; set; }

    public bool Check(T value) =>
        value is string str && !string.IsNullOrWhiteSpace(str);
}

Metode Check mengembalikan boolean yang menunjukkan apakah argumen nilai null, kosong, atau hanya terdiri dari karakter spasi kosong.

Meskipun tidak digunakan oleh aplikasi multi-platform eShop, contoh kode berikut menunjukkan aturan validasi untuk memvalidasi alamat email:

public class EmailRule<T> : IValidationRule<T>
{
    private readonly Regex _regex = new(@"^([w.-]+)@([w-]+)((.(w){2,3})+)$");

    public string ValidationMessage { get; set; }

    public bool Check(T value) =>
        value is string str && _regex.IsMatch(str);
}

Metode Check mengembalikan boolean yang menunjukkan apakah argumen nilai adalah alamat email yang valid atau tidak. Hal ini dicapai dengan mencari argumen nilai untuk kemunculan pertama pola ekspresi reguler yang ditentukan dalam Regex konstruktor. Apakah pola ekspresi reguler telah ditemukan dalam string input dapat ditentukan dengan memeriksa value terhadap Regex.IsMatch.

Menambahkan aturan validasi ke properti

Dalam aplikasi multi-platform eShop, lihat properti model yang memerlukan validasi dinyatakan berjenis ValidatableObject<T>, di mana T adalah jenis data yang akan divalidasi. Contoh kode berikut menunjukkan contoh dua properti tersebut:

public ValidatableObject<string> UserName { get; private set; }
public ValidatableObject<string> Password { get; private set; }

Agar validasi terjadi, aturan validasi harus ditambahkan ke koleksi Validasi dari setiap ValidatableObject<T> instans, seperti yang ditunjukkan dalam contoh kode berikut:

private void AddValidations()
{
    UserName.Validations.Add(new IsNotNullOrEmptyRule<string> 
    { 
        ValidationMessage = "A username is required." 
    });

    Password.Validations.Add(new IsNotNullOrEmptyRule<string> 
    { 
        ValidationMessage = "A password is required." 
    });
}

Metode ini menambahkan aturan validasi ke Validations kumpulan setiap ValidatableObject<T> instansIsNotNullOrEmptyRule<T>, menentukan nilai untuk properti aturan ValidationMessage validasi, yang menentukan pesan kesalahan validasi yang akan ditampilkan jika validasi gagal.

Memicu validasi

Pendekatan validasi yang digunakan dalam aplikasi multi-platform eShop dapat memicu validasi properti secara manual, dan secara otomatis memicu validasi saat properti berubah.

Memicu validasi secara manual

Validasi dapat dipicu secara manual untuk properti model tampilan. Misalnya, ini terjadi di aplikasi multi-platform eShop saat pengguna mengetuk Login tombol pada LoginView, saat menggunakan layanan tiruan. Perintah mendelegasikan memanggil MockSignInAsync metode dalam LoginViewModel, yang memanggil validasi dengan menjalankan Validate metode , yang ditunjukkan dalam contoh kode berikut:

private bool Validate()
{
    bool isValidUser = ValidateUserName();
    bool isValidPassword = ValidatePassword();
    return isValidUser && isValidPassword;
}

private bool ValidateUserName()
{
    return _userName.Validate();
}

private bool ValidatePassword()
{
    return _password.Validate();
}

Metode ini Validate melakukan validasi nama pengguna dan kata sandi yang dimasukkan oleh pengguna pada LoginView, dengan memanggil Validate metode pada setiap ValidatableObject<T> instans. Contoh kode berikut menunjukkan Validate metode dari ValidatableObject<T> kelas :

public bool Validate()
{
    Errors = _validations
        ?.Where(v => !v.Check(Value))
        ?.Select(v => v.ValidationMessage)
        ?.ToArray()
        ?? Enumerable.Empty<string>();

    IsValid = !Errors.Any();

    return IsValid;
}

Metode ini mengambil aturan validasi apa pun yang ditambahkan ke koleksi objek Validations . Metode Check untuk setiap aturan validasi yang diambil dijalankan, dan ValidationMessage nilai properti untuk aturan validasi apa pun yang gagal memvalidasi data ditambahkan ke Errors kumpulan ValidatableObject<T> instans. Akhirnya, IsValid properti diatur, dan nilainya dikembalikan ke metode panggilan, menunjukkan apakah validasi berhasil atau gagal.

Memicu validasi saat properti berubah

Validasi juga secara otomatis dipicu setiap kali properti terikat berubah. Misalnya, ketika pengikatan dua arah dalam LoginView set UserName properti atau Password , validasi dipicu. Contoh kode berikut menunjukkan bagaimana hal ini terjadi:

<Entry Text="{Binding UserName.Value, Mode=TwoWay}">
    <Entry.Behaviors>
        <behaviors:EventToCommandBehavior
            EventName="TextChanged"
            Command="{Binding ValidateUserNameCommand}" />
    </Entry.Behaviors>
</Entry>

Entry Kontrol mengikat ke UserName.Value properti ValidatableObject<T> instans, dan koleksi kontrol Behaviors memiliki instans yang EventToCommandBehavior ditambahkan ke dalamnya. Perilaku ini menjalankan ValidateUserNameCommand sebagai respons terhadap peristiwa yang TextChanged diaktifkan pada Entry, yang dinaikkan ketika teks dalam Entry perubahan. Pada gilirannyaValidateUserNameCommand, delegasi menjalankan ValidateUserName metode , yang menjalankan metode pada ValidatableObject<T> instansValidate. Oleh karena itu, setiap kali pengguna memasukkan karakter dalam Entry kontrol untuk nama pengguna, validasi data yang dimasukkan dilakukan.

Menampilkan kesalahan validasi

Aplikasi multi-platform eShop memberi tahu pengguna tentang kesalahan validasi dengan menyoroti kontrol yang berisi data yang tidak valid dengan latar belakang merah, dan dengan menampilkan pesan kesalahan yang memberi tahu pengguna mengapa data tidak valid di bawah kontrol yang berisi data yang tidak valid. Ketika data yang tidak valid dikoreksi, latar belakang berubah kembali ke status default dan pesan kesalahan dihapus. Gambar di bawah ini menunjukkan LoginView di aplikasi multi-platform eShop saat kesalahan validasi ada.

Menyoroti kontrol yang berisi data yang tidak valid

.NET MAUI menawarkan sejumlah cara untuk menyajikan informasi validasi kepada pengguna akhir, tetapi salah satu cara paling lurus adalah melalui penggunaan Triggers. Triggers memberi kami cara untuk mengubah status kontrol kami, biasanya untuk penampilan, berdasarkan peristiwa atau perubahan data yang terjadi untuk kontrol. Untuk validasi, kami akan menggunakan DataTrigger yang akan mendengarkan perubahan yang dinaikkan dari properti terikat dan menanggapi perubahan. Entry Kontrol pada sedang disiapkan LoginView menggunakan kode berikut:

<Entry Text="{Binding UserName.Value, Mode=TwoWay}">
    <Entry.Style>
        <OnPlatform x:TypeArguments="Style">
            <On Platform="iOS, Android" Value="{StaticResource EntryStyle}" />
            <On Platform="WinUI" Value="{StaticResource WinUIEntryStyle}" />
        </OnPlatform>
    </Entry.Style>
    <Entry.Behaviors>
        <mct:EventToCommandBehavior
            EventName="TextChanged"
            Command="{Binding ValidateCommand}" />
    </Entry.Behaviors>
    <Entry.Triggers>
        <DataTrigger 
            TargetType="Entry"
            Binding="{Binding UserName.IsValid}"
            Value="False">
            <Setter Property="BackgroundColor" Value="{StaticResource ErrorColor}" />
        </DataTrigger>
    </Entry.Triggers>
</Entry>

DataTrigger menentukan properti berikut:

Untuk ini Entry, kita akan mendengarkan perubahan pada LoginViewModel.UserName.IsValid properti . Setiap kali properti ini meningkatkan perubahan, nilainya akan dibandingkan dengan properti yang Value ditetapkan dalam DataTrigger. Jika nilainya sama, maka kondisi pemicu akan terpenuhi dan objek apa pun Setter yang disediakan untuk DataTrigger akan dijalankan. Kontrol ini memiliki satu Setter objek yang memperbarui BackgroundColor properti ke warna kustom yang ditentukan menggunakan StaticResource markup. Trigger Ketika kondisi tidak lagi terpenuhi, kontrol akan mengembalikan properti yang diatur oleh Setter objek ke status sebelumnya. Untuk informasi selengkapnya tentang Triggers, lihat Dokumen .NET MAUI : Pemicu.

Menampilkan pesan kesalahan

UI menampilkan pesan kesalahan validasi dalam Kontrol label di bawah setiap kontrol yang datanya gagal validasi. Contoh kode berikut menunjukkan Label yang menampilkan pesan kesalahan validasi, jika pengguna belum memasukkan nama pengguna yang valid:

<Label
    Text="{Binding UserName.Errors, Converter={StaticResource FirstValidationErrorConverter}"
    Style="{StaticResource ValidationErrorLabelStyle}" />

Setiap Label mengikat ke Errors properti objek model tampilan yang sedang divalidasi. Properti Errors disediakan oleh ValidatableObject<T> kelas , dan berjenis IEnumerable<string>. Errors Karena properti dapat berisi beberapa kesalahan validasi, FirstValidationErrorConverter instans digunakan untuk mengambil kesalahan pertama dari koleksi untuk ditampilkan.

Ringkasan

Aplikasi multi-platform eShop melakukan validasi properti model tampilan sisi klien yang sinkron dan memberi tahu pengguna tentang kesalahan validasi apa pun dengan menyoroti kontrol yang berisi data yang tidak valid, dan dengan menampilkan pesan kesalahan yang memberi tahu pengguna mengapa data tidak valid.

Lihat properti model yang memerlukan validasi berjenis ValidatableObject<T>, dan setiap ValidatableObject<T> instans memiliki aturan validasi yang ditambahkan ke propertinya Validations . Validasi dipanggil dari model tampilan dengan memanggil Validate metode ValidatableObject<T> instans, yang mengambil aturan validasi dan menjalankannya terhadap ValidatableObject<T> properti Nilai. Setiap kesalahan validasi ditempatkan ke dalam Errors properti ValidatableObject<T> instans, dan properti IsValid instans diperbarui ValidatableObject<T> untuk menunjukkan apakah validasi berhasil atau gagal.