Qt實現(xiàn)自定義驗證碼輸入框控件的方法
前言
本文實現(xiàn)了自定義的驗證碼輸入框控件??丶▓D標、輸入框、獲取驗證碼按鈕、驗證碼獲取倒計時標簽。支持鼠標點擊獲取驗證碼按鈕后開始顯示倒計時功能,倒計時為0時,才可以在此點擊獲取驗證碼按鈕。效果如圖:
主要的編程思想還是實現(xiàn)自定義控件的封裝性和共用性。
UI布局:
- 控件1:QWidget,實現(xiàn)整個控件的封裝,這個控件使用水平布局,實現(xiàn)控件的水平擺放,同時,當其中一個控件隱藏時,位置會重新更新,實現(xiàn)在控件的后面只顯示獲取驗證碼和倒計時兩個控件中的一個。
- 控件2:QLabel,實現(xiàn)展示盾牌圖標。
- 控件3:QLineEdit,實現(xiàn)驗證碼輸入功能。
- 控件4:QPushButton,實現(xiàn)獲取驗證碼功能。
- 控件5:QLabel,實現(xiàn)倒計時顯示。
頁面樣式初始化:
控件1:實現(xiàn)外邊框和背景: 邊框寬1像素,顏色#DBDBDB,背景顏色#FFFFFF。
setStyleSheet("QWidget#widget{border:1px solid #DBDBDB;background-color:#FFFFFF;}");
控件2:實現(xiàn)盾牌圖標的展示: 圖片資源:image/vCode.png。
ui.lablevCode->setStyleSheet("border-image:url(image/vCode.png);");
控件3:實現(xiàn)驗證碼輸入功能: 無邊框,背景顏色#FFFFFF,字體顏色#333333。
ui.lineEdit->setStyleSheet("QLineEdit{border:0px;color:#333333;background:#FFFFFF;}");
控件4:實現(xiàn)獲取驗證碼按鈕: 無邊框,字體顏色#999999,鼠標懸浮時字體顏色#3B85FF。
ui->pushButton->setStyleSheet("QPushButton{border:none;color:#999999;}" "QPushButton:hover{border:none;color:#3B85FF;}");
控件5:初始化隱藏(在沒有點擊獲取驗證碼按鈕時為隱藏狀態(tài),點擊獲取驗證碼按鈕后,顯示倒計時,隱藏獲取驗證碼按鈕)。字體顏色#b7b7b7。
ui->label_time->setStyleSheet("QLabel{color:#b7b7b7;}"); ui->label_time->hide();
除了這些控件外,我們還需要創(chuàng)建一個定時器,用來實現(xiàn)倒計時的功能,定時器的溢出時間為1s,定時器的槽函數(shù)為slotVCodeTimeout()。
//創(chuàng)建成員變量 QTimer *m_timer; //動態(tài)創(chuàng)建定時器,并指定定時器的溢出事件和槽函數(shù) m_vCodeTimer = new QTimer(this); connect(m_vCodeTimer, SIGNAL(timeout()), this, SLOT(slotVCodeTimeout())); m_vCodeTimer->setInterval(1000); // 1s
功能實現(xiàn):
1. 輸入限制:
不顯示上下文菜單,禁止輸入中文,默認顯示“請輸入驗證碼”,手機號只能是11位0~9的數(shù)字。
ui.lineEdit->setContextMenuPolicy (Qt::NoContextMenu); // 不顯示上下文菜單 ui.lineEdit->setAttribute(Qt::WA_InputMethodEnabled, false); // 設置禁止中文輸入 ui.lineEdit->setPlaceholderText(QString::fromLocal8Bit("請輸入驗證碼")); // 設置默認顯示內容 QRegExp rx("[0-9]{1,8}"); // 正則表達式:數(shù)字, 8位 QRegExpValidator *validator = new QRegExpValidator(rx, this); ui.lineEdit->setValidator(validator);// 設置正則表達式
2.點擊獲取驗證碼按鈕,執(zhí)行獲取驗證碼操作:
在按鈕的點擊響應函數(shù)中,調用獲取驗證碼的方法,通常是調用后臺接口,實現(xiàn)給指定手機號發(fā)送驗證碼的功能。這里可以發(fā)射一個信號,由控件外部響應這個信號,再做相應的操作,如判斷是否輸入手機號、手機號是否正確、調用后臺接口、判斷是否成功發(fā)送驗證碼等。
void VCodeLineEdit::on_pushButton_clicked() { //調用獲取驗證碼方法 }
3.隱藏獲取驗證碼按鈕,顯示倒計時:
ui->pushButton->hide();//隱藏獲取驗證碼按鈕 ui->label_time->show();//顯示倒計時標簽 if (m_vCodeTimer->isActive())如果定時器已經(jīng)啟動,先停止定時器,再重新打開定時器 { m_vCodeTimer->stop(); } m_vCodeTimer->start(); //設置倒計時顯示的文本 ui->label_time->setText(QString::number(m_time) +QStringLiteral("s后重新發(fā)送"));
4.定時器響應函數(shù):
這里定義了一個成員變量m_time,m_time的初始值設置為60(倒計時事件為60s)。每次定時器溢出,m_time的值減1,先判斷m_time是否已經(jīng)小于等于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后重新發(fā)送")); }
到此這篇關于Qt實現(xiàn)自定義驗證碼輸入框控件的方法的文章就介紹到這了,更多相關Qt 驗證碼輸入框內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
C++實現(xiàn)LeetCode(100.判斷相同樹)
這篇文章主要介紹了C++實現(xiàn)LeetCode(100.判斷相同樹),本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-07-07c++函數(shù)中的指針參數(shù)與地址參數(shù)區(qū)別介紹
c++函數(shù)中的指針參數(shù)與地址參數(shù)區(qū)別介紹;可供參考2012-11-11Linux系統(tǒng)下如何使用C++解析json文件詳解
JSON(JavaScript Object Notation, JS 對象簡譜) 是一種輕量級的數(shù)據(jù)交換格式。下面這篇文章主要給大家介紹了關于Linux系統(tǒng)下如何使用C++解析json文件的相關資料,需要的朋友可以參考下2021-06-06