企业官网建设流程全解析

QT实现随机验证码校验

废话不多说，直接先来上效果

刚开始一看觉得实现起来可能会比较麻烦，但是实际操作过程很简单
下面来看来具体的实现操作吧

具体实现

1.首先我这里是一个弹窗的校验效果，所以第一时间想到的是创建一个QDialog
VerifyCodeDialog.h

#ifndefVERIFYCODEDIALOG_H#defineVERIFYCODEDIALOG_H#include<QDialog>#include<QPushButton>#include<QLineEdit>#include<QLabel>#include<QRandomGenerator>#include<QHBoxLayout>#include<QVBoxLayout>#include<QMessageBox>#include"codelabel.h"classVerifyCodeDialog:publicQDialog{Q_OBJECTpublic:explicitVerifyCodeDialog(QWidget*parent=nullptr);// 获取用户输入的验证码QStringgetInputCode()const;private:// 生成4位随机数字验证码voidgenerateCode();// 刷新验证码voidrefreshCode();// 校验验证码boolcheckCode();private:CodeLabel*m_labCode;// 展示验证码QLineEdit*m_editInput;// 用户输入框QString m_realCode;// 当前正确验证码};#endif// VERIFYCODEDIALOG_H

VerifyCodeDialog.cpp

#include"verifycodedialog.h"#include<QPushButton>VerifyCodeDialog::VerifyCodeDialog(QWidget*parent):QDialog(parent){Qt::WindowFlags flags=windowFlags();flags&=~Qt::WindowContextHelpButtonHint;setWindowFlags(flags);setWindowTitle(QStringLiteral("请输入验证码"));setFixedSize(320,160);setModal(true);m_labCode=newCodeLabel(this);// 样式表全部一行，不换行拆分，彻底杜绝常量换行报错m_labCode->setStyleSheet("font-size:26px; font-weight:bold; color:#0066cc; background:#f0f7ff; padding:6px 12px;");m_labCode->setFixedWidth(120);QPushButton*btnRefresh=newQPushButton(QStringLiteral("换一张"),this);btnRefresh->setFixedWidth(80);m_editInput=newQLineEdit(this);m_editInput->setPlaceholderText(QStringLiteral("请输入4位数字验证码"));m_editInput->setMaxLength(4);QPushButton*btnOk=newQPushButton(QStringLiteral("确认"),this);QPushButton*btnCancel=newQPushButton(QStringLiteral("取消"),this);QHBoxLayout*layCode=newQHBoxLayout();layCode->addWidget(m_labCode);layCode->addWidget(btnRefresh);QHBoxLayout*layBtn=newQHBoxLayout();layBtn->addStretch();layBtn->addWidget(btnOk);layBtn->addWidget(btnCancel);QVBoxLayout*mainLay=newQVBoxLayout(this);mainLay->setContentsMargins(20,20,20,20);mainLay->setSpacing(16);mainLay->addLayout(layCode);mainLay->addWidget(m_editInput);mainLay->addLayout(layBtn);generateCode();connect(btnRefresh,&QPushButton::clicked,this,&VerifyCodeDialog::refreshCode);connect(btnCancel,&QPushButton::clicked,this,&QDialog::reject);connect(btnOk,&QPushButton::clicked,this,[this](){if(checkCode()){accept();}});}voidVerifyCodeDialog::generateCode(){m_realCode.clear();constQString chars="abcdefghijklmnopqrstuvwxyz0123456789";for(inti=0;i<4;i++){intidx=QRandomGenerator::global()->bounded(chars.size());m_realCode+=chars.at(idx);}m_labCode->setText(m_realCode);}voidVerifyCodeDialog::refreshCode(){m_labCode->clear();// 清空旧文字m_labCode->update();// 强制重绘清除残影generateCode();m_editInput->clear();}boolVerifyCodeDialog::checkCode(){QString input=m_editInput->text().trimmed();if(input.isEmpty()){QMessageBox::warning(this,"提示","请输入验证码");returnfalse;}if(input.toLower()!=m_realCode.toLower()){QMessageBox::warning(this,"错误","验证码不正确，请重新输入");refreshCode();returnfalse;}returntrue;}QStringVerifyCodeDialog::getInputCode()const{returnm_editInput->text().trimmed();}

这样就实现了弹窗的效果，并且显示换一张，点击换一张按钮会再次随机生成内容，我这里的内容范围是abcdefghijklmnopqrstuvwxyz0123456789数字和字母，并且再点击确认的时候 校验部分大小写。
那字母带横线去混淆是如何实现的呢，刚开始我觉得这个可能会不好实现，但是很简单，.h文件中我引入了一个**#include “codelabel.h”** 这个就是实现的类
具体代码如下：

#ifndefCODELABEL_H#defineCODELABEL_H#include<QLabel>#include<QPainter>#include<QRandomGenerator>classCodeLabel:publicQLabel{public:explicitCodeLabel(QWidget*p=nullptr):QLabel(p){}protected:voidpaintEvent(QPaintEvent*)override{QPainterp(this);p.fillRect(rect(),QColor(240,247,255));// 绘制干扰线for(inti=0;i<4;i++){p.setPen(QPen(QColor(100,100,100),1));p.drawLine(QRandomGenerator::global()->bounded(width()),QRandomGenerator::global()->bounded(height()),QRandomGenerator::global()->bounded(width()),QRandomGenerator::global()->bounded(height()));}// 绘制验证码文字p.setPen(QColor(0,102,204));p.setFont(QFont("",26,QFont::Bold));p.drawText(rect(),Qt::AlignCenter,text());}};#endif// CODELABEL_H

继承自QLabel 重写paintEvent绘制干扰线即可

具体使用

VerifyCodeDialog dlg;intret=dlg.exec();if(ret==QDialog::Accepted){}else{}

再使用的地方调用即可，即可include.h哦！
欧克，到这里就实现了 自定义随机验证码的功能了，具体校验的内容可以自己定义 感谢观看！！！