Kiểm tra hợp lệ các textbox control – textbox validation

Bài viết này sẽ trình bày một ứng dụng minh họa việc sử dụng kỹ thuật thực hiện việc kiểm tra hợp lệ dữ liệu trên textbox. Chúng ta sẽ học cách sử dụng regular expression để thực hiện data validation và làm thế nào tạo những user control thông qua kế thừa. Điểm nổi bật của ứng dụng này là mỗi ô textbox sẽ tự kiểm tra hợp lệ, nghĩa là textbox sẽ tự thực hiện việc kiểm tra hợp lệ dữ liệu.

Nếu người sử dụng nhập vào văn bản không đúng kiểu dữ liệu của ô textbox thì textbox sẽ hiện lên màu đỏ. Việc này làm cho việc tạo giao diện người dùng (UI) dễ dàng hơn vì bạn có thể kéo thả các ô control này lên biểu mẫu bạn đang tạo. Tìm hiểu liệu xem ngưởi sử dụng có nhập dữ  liệu hợp lệ hay không rất đơn giản là cho kiểm tra thuộc tính IsValid của textbox.

I. Các khái niệm mới

1. Regular Expression

-   Regular Expression là gì? Một regular expression là một dáng mẫu (pattern) văn bản được dùng để truy tìm hoặc thực hiện việc so khớp lên một chuỗi. Trong chừng mực nào đó, có thể bạn đã quen sử dụng một hình thức của regular expression khi bạn đùng pattern đó *.* khi lùng tìm một tập tin trên máy tính sử dụng công cụ Windows Search hoặc lệnh dir ở command-lind. Tuy nhiên, regular expression cung cấp một cú pháp mạnh và chặt chẽ hơn.

-   Ví dụ: regular expression cho phép so khắp một con số gồm 3 ký số (digit) là: ^\d{3}$. Thoạt nhìn xem ra lộn xộn , nhưng ta thử tách rời rồi khảo sát từng bước một trong một luc. Dấu ^ cho biết bắt đầu một chuỗi. \d so khớp với một ký tự digit, từ 0 đến 9. {3} là một subexpression cho biết digit phải xuất hiện 3 lần. Cuối cùng $ cho biết là cuối chuỗi. Như vậy, muốn so khớp 2 digit thì dùng ^\d{2}$, với 4 digit sẽ là:  ^\d{4}$.

-  Bây giờ chúng ta thử xem một regular expression khác: ^\d{3}-^\d{2}-^\d{4}$. Phần đầu tiên ^\d{3} thì chúng ta đã biết. Phần kế tiếp, – đơn giản là một dấu gạch ngang đi theo kế tiếp trên chỗi. Phần ^\d{2} cho biết so khớp với 2 digit, rồi tiếp theo là một dấu gạch ngang, và phần ^\d{4} cho biết là so khớp với 4 digit và cuối cùng là $ kết thúc chỗi. Như vậy, regular expression ^\d{3}-^\d{2}-^\d{4}$ so khớp với một con số tương tự như 123-45-6789. Regular expression này dùng so khớp với mã số an ninh xã hội của Mỹ.

-   Regular expression rất mạnh cho phép bạn làm nhiều việc mà có thể bạn phải mất không biết bao nhiêu công sức để lập trình. Trong thực tế, regular expression là một ngôn ngữ. Phải mất một chương để nói hết regular expression với những khả năng của nó.

-   Nếu muốn tìm hiểu thêm về Regular expression tại:

• Regular-expressions.info
• Congdongcviet.com
• Kiểm tra cú pháp so khớp của Regular expression tại http://rubular.com/

-   Ứng dụng mẫu này kiểm tra hợp lệ mã số an sinh xã hội, ZIP code (mã bưu chính), số điện thoại, địa chỉ email, và địa chỉ IP.

2. Tạo một lớp user control mới bằng cách sử dụng kế thừa

-   Mỗi user control RegExTextBox dưới đây đều kế thừ từ một lớp cơ bản TextBox. Lớp này được định nghĩa như sau:

class RegExTextBox: System.Windows.Forms.TextBox

-   Lớp này chịu trách nhiệm kiểm tra hợp lệ nội dung của một TextBox so với một regular expression nào đó đã được khai báo. Tính kế thừa được dùng để thay đổi cách hành xử của một ô control hiện hữu (textbox). Nói tóm lại, một khi dòng lệnh được kai bóa thì ngoài những thành viên cố hữu của lớp cơ sở, bnaj có thể thêm các thuộc tính, hàm hành sự và tình huống thích ứng với nhu cầu riêng của bạn. Ứng dụng này dùng đến 5 user control: EmailTextBox, IPAddressTextBox, PhoneTextBox, RegExpTextBox, SsnTextBox.

-  Khi sử dụng click lenen nút <Validate> thì đoạn mã sẽ tìm các RegExTextBox control, rồi ép chúng vào kiểu dữ liệu cơ sở để gọi hàm IsValid.

II. Sơ lược về đoạn mã của ứng dụng

1. Sơ lược

-  Tạo một project windows form application như bình thường. Sau đó add thêm các class như EmailTextBox.cs, IPAddressTextBox.cs, PhoneTextBox.cs, RegExpTextBox.cs, SsnTextBox.cs.

-  Phối hợp với 2 khái niệm của user control và regular expression để tạo ra một user control mới. RegExTextBox control kế thừa từ Windows Forms TextBox control thêm vào 4  thuộc tính mới. Một trong những thuộc tính mới quan trọng là thuộc tính ValidationExpression:

public string ValidationExpression
{
    get { return validationPattern; }
    set
    {
        mValidationExpression = new Regex(value);
        validationPattern = value;
    }
}

         Thuộc tính này để cho chúng ta khai báo regular expression (như là một string) mà ta sẽ dùng để kiểm tra hợp lệ phần text trên một Textbox control. Điểm quan trọng là việc này có thể đặt để được như là một string (đối nghịch với một đối tượng Regex) như vậy chúng ta có thể khai báo RegEx Pattern dùng các thuộc tính window. Lớp Regex là thành phần của .NET Framework, và nó đại diện cho regular expression.

-   Thuộc tính kế tiếp là IsValid:

public bool IsValid
{
    get
    {
        if (mValidationExpression != null)
        {
            return mValidationExpression.IsMatch(this.Text);
        }
        else
        {
            return true;
        }
    }
}

        Thuộc tính IsValid là read-only vì nó chỉ có hàm get accessor, khá đơn giản. Nó trả về true nếu dữ liệu khớp với regular expression (hoặc khi không có regular expresion), bằng không nó trả về false.

-   Control RegExTextBox cũng có những thuộc tính để đặt để thông điệp sai lầm, merrorMessage, và đổi màu nếu có lỗi xảy ra, merrorColor. Nếu nguwoir dử dụng nhập sai dữ liệu, RegExTextBox cho thay đổi lập tức màu văn bản (foreground) qua màu đỏ báo động có lỗi khi nhập. Muốn làm thế, RegExTextBox sẽ phủ quyết tình huống Validated của lớp TextBox.

protected override void OnValidated(EventArgs e)
{
    if (!this.IsValid)
    {
        this.ForeColor = mErrorColor;
    }
    else
    {
        this.ForeColor = this.ForeColor;
    }
    base.OnValidated(e);
}

     Hàm OnValidated hoạt động bằng cách triệu gọi thuộc tính IsValid. Nếu IsValid trả về là false thì nó thay đổi thuộc tính ForeColor về màu đỏ (hoặc bất cứ màu nào tùy bạn), còn nếu IsValid trả về true thì thuộc tính ForeColor được cho về màu bình thường của forecolor. Bạn để ý là cuối hàm, hàm cơ sở OnValidate() được gọi. Đây là một tập quán tốt để bảo đảm là lớp cơ sở, lớp textbox nguyên thủy, cũng nhận được tính huống Validated.

2. Mã ứng dụng

-  Nội dung class RegExTextBox.cs

using System;
using System.Text;
using System.Text.RegularExpressions;
using System.Drawing;
namespace Textbox_validation
{
    class RegExTextBox: System.Windows.Forms.TextBox
    {
        protected string validationPattern;
        protected string mErrorMessage;
        protected Regex mValidationExpression;
        protected Color mErrorColor = Color.Red;
        public string ErrorMessage
        {
            get { return mErrorMessage; }
            set { mErrorMessage = value; }
        }
        public Color ErrorColor
        {
            get { return mErrorColor; }
            set { mErrorColor = value; }
        }
        public bool IsValid
        {
            get
            {
                if (mValidationExpression != null)
                {
                    return mValidationExpression.IsMatch(this.Text);
                }
                else
                {
                    return true;
                }
            }
        }
        public string ValidationExpression
        {
            get { return validationPattern; }
            set
            {
                mValidationExpression = new Regex(value);
                validationPattern = value;
            }
        }
        protected override void OnValidated(EventArgs e)
        {
            if (!this.IsValid)
            {
                this.ForeColor = mErrorColor;
            }
            else
            {
                this.ForeColor = this.ForeColor;
            }
            base.OnValidated(e);
        }
    }
}

-   Nội dung class EmailTextBox.cs

using System;
using System.Text.RegularExpressions;
namespace Textbox_validation
{
    class EmailTextBox: RegExTextBox
    {
        public EmailTextBox()
        {
            this.ValidationExpression = @"^(([^<>()[\]\\.,;:\s@\""]+"
                      + @"(\.[^<>()[\]\\.,;:\s@\""]+)*)|(\"".+\""))@"
                      + @"((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}"
                      + @"\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+"
                      + @"[a-zA-Z]{2,}))$";
            this.ErrorMessage = "The e-mail address must be in the form of [email protected]";
        }
    }
}

-   Nội dung class IPAddressTextBox.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.RegularExpressions;
namespace Textbox_validation
{
    class IPAddressTextbox: RegExTextBox
    {
        public IPAddressTextbox()
        {
            this.ValidationExpression = @"^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$";
            this.ErrorMessage = "The IP address must be in the form of 111.111.111.111";
        }
    }
}

-  Nội dung class PhoneTextBox.cs

using System;
using System.Text.RegularExpressions;
namespace Textbox_validation
{
    class PhoneTextBox: RegExTextBox
    {
        public PhoneTextBox()
        {
            this.ValidationExpression = @"^((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}$";
            this.ErrorMessage = "The phone number must be in the form of (555) 555-1212 or 555-555-1212.";
        }
    }
}

-   Nội dung class SsnTextBox.cs

using System;
using System.Text.RegularExpressions;
namespace Textbox_validation
{
    class SsnTextBox:RegExTextBox
    {
        public SsnTextBox()
        {
            this.ValidationExpression = @"^\d{3}-\d{2}-\d{4}$";
            this.ErrorMessage = "The social security number must be in the form of 555-55-5555";
        }
    }
}

- Nội dung class IPZipCodeTextBox.cs

using System;
using System.Text.RegularExpressions;
namespace Textbox_validation
{
    class ZipCodeTextBox: RegExTextBox
    {
        public ZipCodeTextBox()
        {
            this.ValidationExpression = @"^\d{5}$";
            this.ErrorMessage = "The Zip code number must be in the form of 12345";
        }
    }
}

-  Khi viết xong các lớp trên tiến hành build (F6) thì trên thanh toolbox sẽ xuất hiện thêm các component (Ở đây là Textbox validation Component). Chúng ta cứ kéo thả đúng loại textbox cần dùng vào Form khi thiết kế.

-  Và giờ viết source cho class frmMain.cs

using System;
using System.ComponentModel;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using System.Text.RegularExpressions;
namespace Textbox_validation
{
    public partial class frmMain : Form
    {

        public frmMain()
        {
            InitializeComponent();
            this.MaximizeBox = false;
            this.StartPosition = FormStartPosition.CenterScreen;
        }
        private void helpToolStripMenuItem_Click(object sender, EventArgs e)
        {
            MessageBox.Show("http://thanhcuong.wordpress.com" + "\n E-mail: [email protected]", "Demo Validating Textbox", MessageBoxButtons.OK, MessageBoxIcon.Information);
        }

        private void btnValidate_Click(object sender, EventArgs e)
        {
            string validationMessage = string.Empty;
            foreach (Control genericControl in this.Controls)
            {
                Control ctrl = genericControl as RegExTextBox;
                if (ctrl != null)
                {
                    RegExTextBox regExControl = (RegExTextBox)ctrl;
                    if (!regExControl.IsValid)
                    {
                        validationMessage += regExControl.Name + ":" +
                            regExControl.ErrorMessage + Environment.NewLine;
                    }
                }
            }
            if (validationMessage != string.Empty)
            {
                txtInvalidControls.Text = "The following controls have invalid values: " + Environment.NewLine + validationMessage;
            }
            else
            {
                txtInvalidControls.Text = "All control contain valid input";
            }
        }
    }
}

     Hàm thụ lý tình huống Click của button <Validate>, btnValidate_Click, sẽ thực hiện tất cả các kiểm tra hợp lệ đối với Form. Trước tiên, hai biến được khai báo.

string validationMessage = string.Empty;

     Biến genericControl sẽ được dùng để duyệt qua collection Controls của Form sử dụng vòng lặp foreach. Biến validationMessage dùng xây dựng một thông điệp báo lỗi chứa các thông điếp của các control trên Form.

     Vì mỗi user control có riêng một thuộc tính IsValid (kế thừa từ RegExTextBox) nên việc thực hiện kiểm tra hợp lệ rất đơn giản và đẹp mắt. Vòng lặp foreach dùng duyệt qua tất cả các control trên Form. Nếu control là một RegExTexBox, thì thuộc tính IsValid được gọi:

foreach (Control genericControl in this.Controls)
{
    Control ctrl = genericControl as RegExTextBox;
    if (ctrl != null)
    {
        RegExTextBox regExControl = (RegExTextBox)ctrl;
        if (!regExControl.IsValid)
        {
            validationMessage += regExControl.Name + ":" +
                regExControl.ErrorMessage + Environment.NewLine;
        }
    }
}

     Bạn thấy ctrl1 (là biến genericControl) bị ép kiểu dữ liệu RegExtextBox, như vậy cho phép bạn kiểm tra thuộc tính IsValid. Nếu control nào bất hợp lệ thì thông điệp báo lỗi validationMessage sẽ được hình thành nối đuôi nhau, và sẽ được in ra nếu biến validationMessage không rỗng.

if (validationMessage != string.Empty)
{
    txtInvalidControls.Text = "The following controls have invalid values: " + Environment.NewLine + validationMessage;
}
else
{
    txtInvalidControls.Text = "All control contain valid input";
}

-  Sẵn tiện bài viết này nói về Regular Expression nên mình trình bày thêm một mẹo nhỏ để xóa tất cả các dòng trắng (blank line) của code trong visual studio. Đầu tiên bạn mở file code cần xóa dòng trắng lên rồi nhấn tổ hợp phím Ctrl + H. Cửa sổ Find and Replace xuất hiện bạn gõ vào ô Find what: ^$\n  đây là regular expression tìm các dòng trắng. Sau đó check vào ô Use rồi chọn Regular expressions. Cứ thế bạn chọn chế độ Replace All để xóa tất cả các dòng trắng, chọn Replace để xóa từng dòng khi tìm thấy (như hình bên dưới) .

III. Chạy ứng dụng và nhận xét chung

1. Chạy ứng dụng

-  Khi khởi chạy ứng dụng trên bạn những textbox nào chúng ta nhập sai sẽ hiển có màu đỏ, những textbox nhập đúng  sẽ bình thường như hình dưới đây.

2. Source code chương trình demo

Click vào đây để dowload source code chương trình demo Validating Textbox

3. Nhận xét chung

Bài viết này đã trình bày một kỹ thuật kiểm tra hợp lệ các ô control TextBox. Regular expression là những pattern văn bản dùng truy tìm hoặc so khớp với các chuỗi. Tính kế thừa cho phép chúng ta tạo ra những user control mới với lập trình tối thiểu. Bằng cách phối hợp với regular expression và user control bạn có thể tạo ra những ô textbox tự mình kiểm tra hợp leejj các dữ liệu nhập vào. Một khi các control này làm cho việc thiết kế các giao diện đơn giản hơn nhiều.