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