企业官网建设流程全解析

Qt 高级编程 039：QLineEdit 样式美化+密码模式+正则校验

📌 前言：为什么 QLineEdit 值得你花 10 分钟精读？

哈喽各位 Qt 小伙伴们～👋 今天咱们来聊一聊 Qt 中最最最常用的控件之一 ——QLineEdit！

你可能会说：“切～不就是个输入框吗？有啥好讲的？” 🤔

NONONO！大错特错！❌ 别看 QLineEdit 长得简单，里面的水可深着呢～🌊

你知道 QLineEdit 有多少种状态吗？5种！🎯
你知道 QSS 样式表能玩出多少花样吗？N种！🎨
你知道正则校验有多少坑吗？踩过的人都哭了！😭

今天这篇文章，咱们就从基础属性 → QSS美化 → 密码模式 → 禁用状态 → 正则校验，一条龙服务给你安排得明明白白！保证你看完之后，QLineEdit 玩得比谁都溜～😎

Bilibili 同步视频

Qt 高级编程 039：QLineEdit 样式美化+密码模式+正则校验

🏗️ 一、QLineEdit 基础属性大盘点

1.1 只读模式 readOnly —— 只许看不许摸 🙈

QLineEdit 的只读属性就像图书馆里的书——你可以翻，但不能写！📖

两种设置方式，任君挑选：

💡小Tips：只读和禁用是两码事哦！只读的文本可以选中复制，禁用的话连选都选不了～

1.2 焦点控制 setFocusPolicy —— 谁是全场焦点？👀

还记得咱们之前讲迅雷界面的时候聊过焦点吗？（没错，就是第二章那个～😉）

QLineEdit 获得焦点后，样式会发生变化，这就是setFocusPolicy()的功劳！

// 设置强焦点：点击/Tab键都能获得焦点 ui->lineEdit->setFocusPolicy(Qt::StrongFocus); // 不接受焦点：点了也白点 ui->lineEdit->setFocusPolicy(Qt::NoFocus);

1.3 文本对齐 setAlignment —— 左中右，你说了算 🎯

文本在输入框里怎么摆？左对齐？居中？右对齐？

设计器操作：选中控件 → 属性面板 →align→ 水平/垂直对齐随便选

代码实现：

// 水平居中 + 垂直居中 ui->lineEdit->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter); // 右对齐（常用于数字输入） ui->lineEdit->setAlignment(Qt::AlignRight | Qt::AlignVCenter);

1.4 输入长度限制 —— 多长是个头？📏

想限制用户最多输入多少个字符？一句话搞定：

// 最多输入20个字符 ui->lineEdit->setMaxLength(20);

🎨 二、QSS 样式表美化：让你的输入框颜值爆表！

2.1 为什么要用 QSS？

Qt 自带的默认样式嘛…怎么说呢…朴素中透着一丝简陋😅

但别怕！有了QSS（Qt Style Sheets），咱们分分钟让输入框从"土肥圆"变成"高富帅"！💅

📢重要提醒：QSS 样式表这玩意儿，一般都不是自己敲的！都是复制粘贴改参数的～谁要是跟你说他是纯手写的，那他要么是大神，要么是在装X…🤫

2.2 完整 QSS 样式模板（直接抄作业！📝）

废话不多说，直接上干货！👇

/* ===== QLineEdit 基础样式 ===== */ QLineEdit { border: 2px solid #333333; /* 边框：2px实线深灰 */ border-radius: 8px; /* 圆角：8px，圆润不扎手 */ padding: 0px 8px; /* 内边距：文字别贴边 */ background-color: #2d2d2d; /* 背景色：暗黑风格YYDS */ color: #ffffff; /* 文字颜色：白色 */ selection-background-color: #0078d7;/* 选中文本背景色：微软蓝 */ font-family: "Microsoft YaHei"; /* 字体：微软雅黑，拒绝宋体 */ font-size: 14px; /* 字号：14px，护眼刚刚好 */ min-height: 50px; /* 最小高度：50px，大气！ */ max-height: 50px; /* 最大高度：50px，固定高度 */ } /* ===== 鼠标悬浮样式 :hover ===== */ QLineEdit:hover { border: 2px solid #0078d7; /* 悬浮时边框变蓝 */ border-radius: 8px; /* 圆角保持一致 */ background-color: #3a3a3a; /* 背景稍微亮一丢丢 */ color: #0078d7; /* 文字也变蓝，呼应感拉满 */ } /* ===== 获得焦点样式 :focus ===== */ QLineEdit:focus { border: 2px solid #0078d7; /* 焦点边框蓝色高亮 */ background-color: #3a3a3a; /* 背景提亮 */ } /* ===== 只读状态 :read-only ===== */ QLineEdit:read-only { border: 2px solid #555555; /* 边框变灰，暗示不可编辑 */ background-color: #333333; /* 背景更深，"封印"感 */ color: #888888; /* 文字变灰，一眼看穿 */ } /* ===== 禁用状态 :disabled ===== */ QLineEdit:disabled { border: 2px solid #444444; /* 边框更灰 */ background-color: #2a2a2a; /* 背景更暗 */ color: #666666; /* 文字灰到快看不见 */ }

2.3 样式效果一览图 🖼️

graph LR A[QLineEdit<br/>基础状态] -->|鼠标移入| B[:hover<br/>悬浮状态] A -->|点击获得焦点| C[:focus<br/>焦点状态] A -->|setReadOnly(true)| D[:read-only<br/>只读状态] A -->|setEnabled(false)| E[:disabled<br/>禁用状态] style A fill:#2d2d2d,stroke:#333,stroke-width:2px,color:#fff style B fill:#3a3a3a,stroke:#0078d7,stroke-width:2px,color:#0078d7 style C fill:#3a3a3a,stroke:#0078d7,stroke-width:3px,color:#fff style D fill:#333333,stroke:#555,stroke-width:2px,color:#888 style E fill:#2a2a2a,stroke:#444,stroke-width:2px,color:#666

🎯五种状态，五种心情！从活泼的悬浮蓝到灰扑扑的禁用态，每一种状态都在跟用户"说话"～

🔐 三、密码模式 echoMode：你的密码我看不见 🙈

3.1 echoMode 是什么？

echoMode决定了输入的文本怎么显示给用户看。就像你输入密码的时候，显示的是 ****** 而不是真实密码～🔒

3.2 四种模式详解 🔍

3.3 代码示例 💻

// 设置为密码模式（最常用！） ui->lineEdit_password->setEchoMode(QLineEdit::Password); // 切换显示/隐藏密码（现在APP都爱这么玩～） void MainWindow::on_togglePasswordBtn_clicked() { if (ui->lineEdit_password->echoMode() == QLineEdit::Password) { ui->lineEdit_password->setEchoMode(QLineEdit::Normal); // 显示明文 } else { ui->lineEdit_password->setEchoMode(QLineEdit::Password); // 隐藏密码 } }

💡冷知识：为什么是模式2而不是模式1？因为 NoEcho 模式下你连自己输了几个字符都不知道，太反人类了…😂 所以 Password 模式才是业界标准！

🚫 四、禁用状态 disabled：我躺平了，别碰我 😴

4.1 什么时候用禁用状态？

• 某些条件不满足时，不让用户输入

• 表单提交中，防止重复操作

• 展示信息但不允许修改（不过这种情况更推荐 readOnly）

4.2 代码设置

// 禁用输入框 ui->lineEdit->setEnabled(false); // 重新启用 ui->lineEdit->setEnabled(true);

⚠️友情提示：如果只是不让编辑但允许复制，优先用 readOnly！disabled 状态下文字都选不了，用户体验不太好～而且一般禁用的控件干脆直接隐藏算了，放那儿灰扑扑的多影响心情…😅

🎯 五、正则表达式校验：输入合规性的终极武器 ⚔️

🔥重头戏来了！这部分是 QLineEdit 最实用也最容易踩坑的地方，坐稳扶好～

5.1 为什么需要正则校验？

想象一下：你让用户输入邮箱，结果他给你输了个123456…😓
你让用户输入手机号，结果他给你输了abcdefg…🤦♂️

这时候就需要正则表达式（Regular Expression）来救场了！它就像一个严格的门卫 🚪，不符合规则的输入一律拦在门外！

5.2 核心类介绍 📚

Qt 提供了完整的正则校验三件套：

5.3 实现流程图 📊

flowchart TD A[用户输入字符] --> B{QRegExpValidator<br/>校验器检查} B -->|符合规则| C[允许输入<br/>显示在输入框] B -->|不符合规则| D[拒绝输入<br/>字符不显示] C --> E[用户按下回车] E --> F{格式完全匹配?} F -->|是| G[触发 returnPressed 信号] F -->|否| H[不触发信号] style A fill:#e3f2fd,stroke:#2196f3,stroke-width:2px style B fill:#fff3e0,stroke:#ff9800,stroke-width:2px style C fill:#e8f5e9,stroke:#4caf50,stroke-width:2px style D fill:#ffebee,stroke:#f44336,stroke-width:2px style G fill:#e8f5e9,stroke:#4caf50,stroke-width:2px style H fill:#ffebee,stroke:#f44336,stroke-width:2px

5.4 邮箱校验完整代码示例 💌

第一步：包含头文件 📥

#include <QRegExp> #include <QRegExpValidator> #include <QMessageBox> #include <QDebug>

第二步：设置正则校验器 🛡️

void MainWindow::initEmailValidator() { // 邮箱正则表达式（从正则生成网站复制的，自己写容易翻车...😅） QString emailPattern = "^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$"; // 1. 创建正则对象 QRegExp emailRegExp(emailPattern); // 2. 创建校验器，绑定正则规则 QRegExpValidator* emailValidator = new QRegExpValidator(emailRegExp, this); // 3. 给输入框设置校验器 ui->lineEdit_email->setValidator(emailValidator); qDebug() << "📧 邮箱校验器设置完成！"; }

⚠️踩坑预警：正则里的反斜杠在 C++ 字符串里要写成！不然转义失效，正则就废了…别问我怎么知道的…😭

第三步：按钮点击校验（推荐方案 ✅）

void MainWindow::on_validateBtn_clicked() { QString email = ui->lineEdit_email->text(); // 获取校验器 const QRegExpValidator* validator = qobject_cast<const QRegExpValidator*>(ui->lineEdit_email->validator()); if (!validator) { QMessageBox::warning(this, u8"警告", u8"校验器未设置！"); return; } int pos = 0; QValidator::State result = validator->validate(email, pos); // 判断校验结果 switch (result) { case QValidator::Acceptable: // ✅ 格式完全正确 QMessageBox::information(this, u8"验证结果", u8"📧 邮箱格式正确！"); break; case QValidator::Invalid: // ❌ 格式错误 QMessageBox::warning(this, u8"验证结果", u8"❌ 邮箱格式不正确！"); break; case QValidator::Intermediate: // ⚠️ 中间状态：输入到一半，还没输完 QMessageBox::information(this, u8"验证结果", u8"⏳ 邮箱还没输完呢～"); break; } }

5.5 踩坑记录：returnPressed 信号的坑 💣

🎬真实踩坑现场还原：

最开始我天真地以为，绑定returnPressed信号就能判断格式对不对…

// 我原本以为这样就能判断了...太傻太天真 😅 connect(ui->lineEdit_email, &QLineEdit::returnPressed, this, &MainWindow::on_email_returnPressed);

结果发现：

• ✅ 格式正确的时候，按回车 → 信号触发了

• ❌ 格式错误的时候，按回车 → 信号根本不触发！

这就尴尬了…我怎么知道用户是没按回车，还是格式不对没触发？🤯

💡结论：returnPressed信号只有在输入完全符合正则规则时才会触发！所以它只能用来处理"输入正确后的逻辑"，不能用来做错误提示！

5.6 两种方案对比 📊

🏆最终结论：按钮点击主动校验才是YYDS！虽然多了个按钮，但用户体验好太多了～

📝 六、完整项目代码参考 🎁

mainwindow.h

#ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QRegExp> #include <QRegExpValidator> QT_BEGIN_NAMESPACE namespace Ui { class MainWindow; } QT_END_NAMESPACE class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(QWidget *parent = nullptr); ~MainWindow(); private slots: void on_validateBtn_clicked(); // 验证按钮点击 void on_togglePasswordBtn_clicked(); // 密码显示切换 private: Ui::MainWindow *ui; void initLineEdits(); // 初始化所有输入框 void initEmailValidator(); // 初始化邮箱校验器 }; #endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h" #include "ui_mainwindow.h" #include <QMessageBox> #include <QDebug> MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , ui(new Ui::MainWindow) { ui->setupUi(this); initLineEdits(); // 初始化输入框样式和属性 initEmailValidator(); // 设置邮箱正则校验 } MainWindow::~MainWindow() { delete ui; } void MainWindow::initLineEdits() { // 第二个输入框：只读模式 ui->lineEdit_readonly->setReadOnly(true); ui->lineEdit_readonly->setText(u8"我是只读状态，点我也没用～"); // 第三个输入框：密码模式 ui->lineEdit_password->setEchoMode(QLineEdit::Password); ui->lineEdit_password->setText("123456"); // 第四个输入框：禁用模式 ui->lineEdit_disabled->setEnabled(false); ui->lineEdit_disabled->setText(u8"我被禁用了，躺平中..."); // 设置统一对齐方式 ui->lineEdit_normal->setAlignment(Qt::AlignLeft | Qt::AlignVCenter); ui->lineEdit_email->setAlignment(Qt::AlignLeft | Qt::AlignVCenter); qDebug() << "✅ 所有输入框初始化完成！"; } void MainWindow::initEmailValidator() { // 邮箱正则表达式 QString pattern = "^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$"; QRegExp emailRegExp(pattern); QRegExpValidator* validator = new QRegExpValidator(emailRegExp, this); ui->lineEdit_email->setValidator(validator); } void MainWindow::on_validateBtn_clicked() { QString email = ui->lineEdit_email->text(); const QRegExpValidator* validator = qobject_cast<const QRegExpValidator*>(ui->lineEdit_email->validator()); if (!validator) return; int pos = 0; QValidator::State result = validator->validate(email, pos); if (result == QValidator::Acceptable) { QMessageBox::information(this, u8"验证结果", u8"📧 邮箱格式正确！"); } else if (result == QValidator::Invalid) { QMessageBox::warning(this, u8"验证结果", u8"❌ 邮箱格式不正确！"); } else { QMessageBox::information(this, u8"验证结果", u8"⏳ 请输入完整的邮箱地址～"); } } void MainWindow::on_togglePasswordBtn_clicked() { if (ui->lineEdit_password->echoMode() == QLineEdit::Password) { ui->lineEdit_password->setEchoMode(QLineEdit::Normal); } else { ui->lineEdit_password->setEchoMode(QLineEdit::Password); } }

🎯 七、知识点总结 📚

mindmap root((QLineEdit<br/>全掌握)) 基础属性 readOnly 只读 setFocusPolicy 焦点 setAlignment 对齐 setMaxLength 长度限制 QSS样式 基础状态 hover 悬浮 focus 焦点 read-only 只读样式 disabled 禁用样式 密码模式 Normal 明文 NoEcho 不显示 Password 密码圆点 PasswordEchoOnEdit 编辑显示 正则校验 QRegExp 正则规则 QRegExpValidator 校验器 validate() 主动校验 returnPressed 信号坑 按钮校验方案

💬 八、写在最后

好啦～今天的 QLineEdit 保姆级教程就到这里啦！🎉

回顾一下咱们都学了啥：

• ✅5种状态：正常、只读、密码、禁用、正则校验

• ✅QSS美化：悬浮、焦点、各种状态一网打尽

• ✅密码模式：4种 echoMode 各有千秋

• ✅正则校验：踩坑 returnPressed，最终按钮方案胜出

🌟一句话总结：QLineEdit 看似简单，实则细节满满！掌握了这些技巧，你的输入框绝对能成为项目里最靓的仔～😎

📌往期精彩回顾：

• 🔥 Qt 迅雷界面复刻教程｜第二章：焦点与样式表的艺术

• 💎 Qt 样式表 QSS 从入门到精通｜看这一篇就够了

👋如果这篇文章对你有帮助，别忘了点赞👍 + 收藏⭐ + 评论💬 三连支持一下哦～
你的支持就是我更新的最大动力！冲鸭！🚀