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

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 'package:go_router/go_router.dart';
@@ -30,9 +30,12 @@ class _LoginPageState extends State<LoginPage> {
final _phone = TextEditingController();
final _password = TextEditingController();
final _phoneFocus = FocusNode();
final _passwordFocus = FocusNode();
bool _submitting = false;
String? _error;
String? _phoneError;
String? _passwordError;
bool _obscurePassword = true;
@override
@@ -47,23 +50,31 @@ class _LoginPageState extends State<LoginPage> {
void dispose() {
_phone.dispose();
_password.dispose();
_phoneFocus.dispose();
_passwordFocus.dispose();
super.dispose();
}
/// 校验手机号提交登录请求。
/// 校验手机号和密码,通过后再提交登录请求。
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(() {
_submitting = true;
_phoneError = null;
_passwordError = null;
_error = null;
});
try {
@@ -123,10 +134,16 @@ class _LoginPageState extends State<LoginPage> {
const SizedBox(height: 40),
TextField(
controller: _phone,
focusNode: _phoneFocus,
keyboardType: TextInputType.phone,
autofillHints: const [AutofillHints.telephoneNumber],
onChanged: (_) {
if (_phoneError != null) setState(() => _phoneError = null);
if (_phoneError != null || _error != null) {
setState(() {
_phoneError = null;
_error = null;
});
}
},
decoration: InputDecoration(
labelText: '手机号',
@@ -137,12 +154,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: (_) => _submitting ? null : _login(),
decoration: InputDecoration(
labelText: '密码',
prefixIcon: const Icon(Icons.lock_outline),
errorText: _passwordError,
suffixIcon: IconButton(
tooltip: _obscurePassword ? '显示密码' : '隐藏密码',
onPressed: () => setState(() => _obscurePassword = !_obscurePassword),