完善移动端登录密码必填校验
This commit is contained in:
@@ -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),
|
||||
|
||||
Reference in New Issue
Block a user