Qt實(shí)現(xiàn)自定義驗(yàn)證碼輸入框控件的方法

第Qt實(shí)現(xiàn)自定義驗(yàn)證碼輸入框控件的方法目錄前言UI布局：頁面樣式初始化：功能實(shí)現(xiàn)：

前言

本文實(shí)現(xiàn)了自定義的驗(yàn)證碼輸入框控件?？丶▓D標(biāo)、輸入框、獲取驗(yàn)證碼按鈕、驗(yàn)證碼獲取倒計(jì)時(shí)標(biāo)簽。支持鼠標(biāo)點(diǎn)擊獲取驗(yàn)證碼按鈕后開始顯示倒計(jì)時(shí)功能，倒計(jì)時(shí)為0時(shí)，才可以在此點(diǎn)擊獲取驗(yàn)證碼按鈕。效果如圖：

主要的編程思想還是實(shí)現(xiàn)自定義控件的封裝性和共用性。

UI布局：

控件1：QWidget，實(shí)現(xiàn)整個(gè)控件的封裝，這個(gè)控件使用水平布局，實(shí)現(xiàn)控件的水平擺放，同時(shí)，當(dāng)其中一個(gè)控件隱藏時(shí)，位置會(huì)重新更新，實(shí)現(xiàn)在控件的后面只顯示獲取驗(yàn)證碼和倒計(jì)時(shí)兩個(gè)控件中的一個(gè)?？丶?：QLabel，實(shí)現(xiàn)展示盾牌圖標(biāo)?？丶?：QLineEdit，實(shí)現(xiàn)驗(yàn)證碼輸入功能?？丶?：QPushButton，實(shí)現(xiàn)獲取驗(yàn)證碼功能?？丶?：QLabel,實(shí)現(xiàn)倒計(jì)時(shí)顯示。

頁面樣式初始化：

控件1：實(shí)現(xiàn)外邊框和背景：邊框?qū)?像素，顏色#DBDBDB，背景顏色#FFFFFF。

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

控件2：實(shí)現(xiàn)盾牌圖標(biāo)的展示：圖片資源：image/vCode.png。

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

控件3：實(shí)現(xiàn)驗(yàn)證碼輸入功能：無邊框，背景顏色#FFFFFF,字體顏色#333333。

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

控件4：實(shí)現(xiàn)獲取驗(yàn)證碼按鈕：無邊框，字體顏色#999999，鼠標(biāo)懸浮時(shí)字體顏色#3B85FF。

ui-pushButton-setStyleSheet("QPushButton{border:none;color:#999999;}"

"QPushButton:hover{border:none;color:#3B85FF;}");

控件5：初始化隱藏（在沒有點(diǎn)擊獲取驗(yàn)證碼按鈕時(shí)為隱藏狀態(tài)，點(diǎn)擊獲取驗(yàn)證碼按鈕后，顯示倒計(jì)時(shí)，隱藏獲取驗(yàn)證碼按鈕）。字體顏色#b7b7b7。

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

ui-label_time-hide();

除了這些控件外，我們還需要?jiǎng)?chuàng)建一個(gè)定時(shí)器，用來實(shí)現(xiàn)倒計(jì)時(shí)的功能,定時(shí)器的溢出時(shí)間為1s，定時(shí)器的槽函數(shù)為slotVCodeTimeout()。

//創(chuàng)建成員變量

QTimer*m_timer;

//動(dòng)態(tài)創(chuàng)建定時(shí)器，并指定定時(shí)器的溢出事件和槽函數(shù)

m_vCodeTimer=newQTimer(this);

connect(m_vCodeTimer,SIGNAL(timeout()),this,SLOT(slotVCodeTimeout()));

m_vCodeTimer-setInterval(1000);//1s

功能實(shí)現(xiàn)：

1.輸入限制：

不顯示上下文菜單，禁止輸入中文，默認(rèn)顯示請(qǐng)輸入驗(yàn)證碼，手機(jī)號(hào)只能是11位0~9的數(shù)字。

ui.lineEdit-setContextMenuPolicy(Qt::NoContextMenu);//不顯示上下文菜單

ui.lineEdit-setAttribute(Qt::WA_InputMethodEnabled,false);//設(shè)置禁止中文輸入

ui.lineEdit-setPlaceholderText(QString::fromLocal8Bit("請(qǐng)輸入驗(yàn)證碼"));//設(shè)置默認(rèn)顯示內(nèi)容

QRegExprx("[0-9]{1,8}");//正則表達(dá)式：數(shù)字,8位

QRegExpValidator*validator=newQRegExpValidator(rx,this);

ui.lineEdit-setValidator(validator);//設(shè)置正則表達(dá)式

2.點(diǎn)擊獲取驗(yàn)證碼按鈕，執(zhí)行獲取驗(yàn)證碼操作：

在按鈕的點(diǎn)擊響應(yīng)函數(shù)中，調(diào)用獲取驗(yàn)證碼的方法，通常是調(diào)用后臺(tái)接口，實(shí)現(xiàn)給指定手機(jī)號(hào)發(fā)送驗(yàn)證碼的功能。這里可以發(fā)射一個(gè)信號(hào)，由控件外部響應(yīng)這個(gè)信號(hào)，再做相應(yīng)的操作，如判斷是否輸入手機(jī)號(hào)、手機(jī)號(hào)是否正確、調(diào)用后臺(tái)接口、判斷是否成功發(fā)送驗(yàn)證碼等。

voidVCodeLineEdit::on_pushButton_clicked()

//調(diào)用獲取驗(yàn)證碼方法

}

3.隱藏獲取驗(yàn)證碼按鈕，顯示倒計(jì)時(shí)：

ui-pushButton-hide();//隱藏獲取驗(yàn)證碼按鈕

ui-label_time-show();//顯示倒計(jì)時(shí)標(biāo)簽

if(m_vCodeTimer-isActive())如果定時(shí)器已經(jīng)啟動(dòng)，先停止定時(shí)器，再重新打開定時(shí)器

m_vCodeTimer-stop();

m_vCodeTimer-start();

//設(shè)置倒計(jì)時(shí)顯示的文本

ui-label_time-setText(QString::number(m_time)+QStringLiteral("s后重新發(fā)送"));

4.定時(shí)器響應(yīng)函數(shù)：

這里定義了一個(gè)成員變量m_time，m_time的初始值設(shè)置為60（倒計(jì)時(shí)事件為60s）。每次定時(shí)器溢出，m_time的值減1，先判斷m_time是否已經(jīng)小于等于0。如果是，則表示倒計(jì)時(shí)結(jié)束，隱藏倒計(jì)時(shí)標(biāo)簽，重新顯示獲取驗(yàn)證碼按鈕，并關(guān)閉定時(shí)器，重置m_time。如果沒有小于等于0，表示倒計(jì)時(shí)沒有結(jié)束，則更新倒計(jì)時(shí)顯示標(biāo)簽內(nèi)容。

m_time-=1;

if(m_time=0)

ui-label_time-hide();

ui-pushButton-show();

if(m_vCodeTimer-isAc