★★★★★
#UI·디자인 · claude-code
Form Validation 패턴 — 이메일·전화번호·필수항목
로그인/회원가입 폼에 검증 추가. 실시간 에러 표시.
#form-validation#textformfield#regex
변수 3개 — 여기 채우면 아래 프롬프트에 바로 들어가요
로그인/회원가입 폼에 검증 추가. 실시간 에러 표시.
검증 규칙:
- 이메일: {{EMAIL_REQUIRED}}
- 전화번호: {{PHONE_REQUIRED}}
- 비밀번호: 8자+, 대문자+숫자 등
- 필수 필드: {{REQUIRED_FIELDS}}
구현:
```dart
class _LoginFormState extends State<LoginForm> {
final _formKey = GlobalKey<FormState>();
String? _validateEmail(String? value) {
if (value == null || value.isEmpty) return '이메일 입력';
if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) return '유효한 이메일';
return null;
}
String? _validatePassword(String? value) {
if (value == null || value.isEmpty) return '비밀번호 입력';
if (value.length < 8) return '8자 이상';
if (!RegExp(r'[A-Z]').hasMatch(value)) return '대문자 필요';
if (!RegExp(r'[0-9]').hasMatch(value)) return '숫자 필요';
return null;
}
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
children: [
TextFormField(
decoration: const InputDecoration(labelText: '이메일'),
validator: _validateEmail,
),
TextFormField(
decoration: const InputDecoration(labelText: '비밀번호'),
obscureText: true,
validator: _validatePassword,
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
// 제출
}
},
child: const Text('로그인'),
),
],
),
);
}
}
```
규칙에 맞춰 validator 함수 추가할까?
쓰는 법 — 위 칸에 본인 값을 채우면 아래 프롬프트에 바로 반영돼요. 복사 버튼을 누르면 채워진 그대로 클립보드에 담기니까, claude-code(또는 본인이 쓰는 AI)에 붙여넣기만 하면 됩니다. 변수가 없으면 그냥 복사해서 쓰세요.