完善移动端登录密码必填校验

This commit is contained in:
czl231
2026-09-04 23:00:55 +08:00
parent e092659622
commit 7ea39334eb
8 changed files with 317 additions and 18 deletions

View File

@@ -1,5 +1,5 @@
// 功能描述:提供工作人员端手机号密码登录界面及本地输入校验。
// 版本1.1.0
// 版本1.2.0
import 'package:flutter/material.dart';
import '../../../app/dependencies.dart';
@@ -21,25 +21,34 @@ class _LoginPageState extends State<LoginPage> {
final _phone = TextEditingController();
final _password = TextEditingController();
final _phoneFocus = FocusNode();
final _passwordFocus = FocusNode();
bool _busy = false;
String? _error;
String? _phoneError;
String? _passwordError;
bool _obscurePassword = true;
/// 校验手机号提交登录请求。
/// 校验手机号和密码,通过后再提交登录请求。
Future<void> _login() async {
final phone = _phone.text.trim();
if (!_phonePattern.hasMatch(phone)) {
final phoneValid = _phonePattern.hasMatch(phone);
final passwordValid = _password.text.isNotEmpty;
if (!phoneValid || !passwordValid) {
setState(() {
_phoneError = '请输入正确的11位手机号';
_phoneError = phoneValid ? null : '请输入正确的11位手机号';
_passwordError = passwordValid ? null : '请输入密码';
_error = null;
});
// 聚焦第一个无效字段,便于键盘和辅助技术用户立即修正。
(phoneValid ? _passwordFocus : _phoneFocus).requestFocus();
return;
}
setState(() {
_busy = true;
_phoneError = null;
_passwordError = null;
_error = null;
});
try {
@@ -59,6 +68,8 @@ class _LoginPageState extends State<LoginPage> {
void dispose() {
_phone.dispose();
_password.dispose();
_phoneFocus.dispose();
_passwordFocus.dispose();
super.dispose();
}
@@ -106,9 +117,15 @@ class _LoginPageState extends State<LoginPage> {
const SizedBox(height: 40),
TextField(
controller: _phone,
focusNode: _phoneFocus,
keyboardType: TextInputType.phone,
onChanged: (_) {
if (_phoneError != null) setState(() => _phoneError = null);
if (_phoneError != null || _error != null) {
setState(() {
_phoneError = null;
_error = null;
});
}
},
decoration: InputDecoration(
labelText: '工作人员手机号',
@@ -119,11 +136,22 @@ class _LoginPageState extends State<LoginPage> {
const SizedBox(height: 14),
TextField(
controller: _password,
focusNode: _passwordFocus,
obscureText: _obscurePassword,
autofillHints: const [AutofillHints.password],
onChanged: (_) {
if (_passwordError != null || _error != null) {
setState(() {
_passwordError = null;
_error = null;
});
}
},
onSubmitted: (_) => _busy ? null : _login(),
decoration: InputDecoration(
labelText: '登录密码',
prefixIcon: const Icon(Icons.lock_outline),
errorText: _passwordError,
suffixIcon: IconButton(
tooltip: _obscurePassword ? '显示密码' : '隐藏密码',
onPressed: () => setState(() => _obscurePassword = !_obscurePassword),