Validasi
Tip
Konten ini adalah kutipan dari eBook, Pola Aplikasi Perusahaan Menggunakan .NET MAUI, tersedia di .NET Docs atau sebagai PDF gratis yang dapat diunduh yang dapat dibaca secara offline.
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.
Catatan
Validasi properti terkadang dapat melibatkan properti dependen. Contoh properti dependen adalah ketika kumpulan nilai yang valid untuk properti A bergantung pada nilai tertentu yang telah diatur dalam properti B. Untuk memeriksa apakah nilai properti A adalah salah satu nilai yang diizinkan akan melibatkan pengambilan nilai properti B. Selain itu, ketika nilai properti B berubah, properti A perlu divalidasi ulang.
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:
Properti | Deskripsi |
---|---|
TargetType |
Jenis kontrol tempat pemicu berada. |
Binding |
Markup data Binding yang akan memberikan pemberitahuan perubahan dan nilai untuk kondisi pemicu. |
Value |
Nilai data yang akan ditentukan saat kondisi pemicu telah terpenuhi. |
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.