Qt實現自定義驗證碼輸入框控制元件的方法

2022-04-01 13:01:34

前言

本文實現了自定義的驗證碼輸入框控制元件。控制元件包括圖示、輸入框、獲取驗證碼按鈕、驗證碼獲取倒計時標籤。支援滑鼠點選獲取驗證碼按鈕後開始顯示倒計時功能，倒計時為0時，才可以在此點選獲取驗證碼按鈕。效果如圖：

主要的程式設計思想還是實現自定義控制元件的封裝性和共用性。

UI佈局：

控制元件1：QWidget，實現整個控制元件的封裝，這個控制元件使用水平佈局，實現控制元件的水平擺放，同時，當其中一個控制元件隱藏時，位置會重新更新，實現在控制元件的後面只顯示獲取驗證碼和倒計時兩個控制元件中的一個。
控制元件2：QLabel，實現展示盾牌圖示。
控制元件3：QLineEdit，實現驗證碼輸入功能。
控制元件4：QPushButton，實現獲取驗證碼功能。
控制元件5：QLabel,實現倒計時顯示。

頁面樣式初始化：

控制元件1：實現外邊框和背景： 邊框寬1畫素，顏色#DBDBDB，背景顏色#FFFFFF。

setStyleSheet("QWidget#widget{border:1px solid #DBDBDB;background-color:#FFFFFF;}");

控制元件2：實現盾牌圖示的展示： 圖片資源：image/vCode.png。

ui.lablevCode->setStyleSheet("border-image:url(image/vCode.png);");

控制元件3：實現驗證碼輸入功能： 無邊框，背景顏色#FFFFFF,字型顏色#333333。

ui.lineEdit->setStyleSheet("QLineEdit{border:0px;color:#333333;background:#FFFFFF;}");

控制元件4：實現獲取驗證碼按鈕： 無邊框，字型顏色#999999，滑鼠懸浮時字型顏色#3B85FF。

ui->pushButton->setStyleSheet("QPushButton{border:none;color:#999999;}"
                              "QPushButton:hover{border:none;color:#3B85FF;}");

控制元件5：初始化隱藏（在沒有點選獲取驗證碼按鈕時為隱藏狀態，點選獲取驗證碼按鈕後，顯示倒計時，隱藏獲取驗證碼按鈕）。字型顏色#b7b7b7。

ui->label_time->setStyleSheet("QLabel{color:#b7b7b7;}");
ui->label_time->hide();

除了這些控制元件外，我們還需要建立一個定時器，用來實現倒計時的功能,定時器的溢位時間為1s，定時器的槽函數為slotVCodeTimeout()。

//建立成員變數
QTimer *m_timer;
//動態建立定時器，並指定定時器的溢位事件和槽函數
m_vCodeTimer = new QTimer(this);
connect(m_vCodeTimer, SIGNAL(timeout()), this, SLOT(slotVCodeTimeout()));
m_vCodeTimer->setInterval(1000);  // 1s

功能實現：

1. 輸入限制：

不顯示上下文選單，禁止輸入中文，預設顯示“請輸入驗證碼”，手機號只能是11位0~9的數位。

ui.lineEdit->setContextMenuPolicy (Qt::NoContextMenu); // 不顯示上下文選單
ui.lineEdit->setAttribute(Qt::WA_InputMethodEnabled, false);  // 設定禁止中文輸入
ui.lineEdit->setPlaceholderText(QString::fromLocal8Bit("請輸入驗證碼")); // 設定預設顯示內容
QRegExp rx("[0-9]{1,8}"); // 正規表示式：數位, 8位元
QRegExpValidator *validator = new QRegExpValidator(rx, this);
ui.lineEdit->setValidator(validator);// 設定正規表示式

2.點選獲取驗證碼按鈕，執行獲取驗證碼操作：

在按鈕的點選響應函數中，呼叫獲取驗證碼的方法，通常是呼叫後臺介面，實現給指定手機號傳送驗證碼的功能。這裡可以發射一個訊號，由控制元件外部響應這個訊號，再做相應的操作，如判斷是否輸入手機號、手機號是否正確、呼叫後臺介面、判斷是否成功傳送驗證碼等。

void VCodeLineEdit::on_pushButton_clicked()
{
    //呼叫獲取驗證碼方法
}

3.隱藏獲取驗證碼按鈕，顯示倒計時：

ui->pushButton->hide();//隱藏獲取驗證碼按鈕
ui->label_time->show();//顯示倒計時標籤

if (m_vCodeTimer->isActive())如果定時器已經啟動，先停止定時器，再重新開啟定時器
{
    m_vCodeTimer->stop();
}
m_vCodeTimer->start();
//設定倒計時顯示的文字
ui->label_time->setText(QString::number(m_time) +QStringLiteral("s後重新傳送"));

4.定時器響應函數：

這裡定義了一個成員變數m_time，m_time的初始值設定為60（倒計時事件為60s）。每次定時器溢位，m_time的值減1，先判斷m_time是否已經小於等於0。如果是，則表示倒計時結束，隱藏倒計時標籤，重新顯示獲取驗證碼按鈕，並關閉定時器，重置m_time。如果沒有小於等於0，表示倒計時沒有結束，則更新倒計時顯示標籤內容。

m_time -= 1;
if(m_time <= 0)
{
    ui->label_time->hide();
    ui->pushButton->show();
    if (m_vCodeTimer->isActive())
    {
        m_vCodeTimer->stop();
    }
    m_time = 60;
}
else{
    ui->label_time->setText(QString::number(m_time) +QStringLiteral("s後重新傳送"));
}

到此這篇關於Qt實現自定義驗證碼輸入框控制元件的方法的文章就介紹到這了,更多相關Qt 驗證碼輸入框內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Qt實現自定義驗證碼輸入框控制元件的方法

目錄

前言

UI佈局：

頁面樣式初始化：

功能實現：

熱門文章