はじめに
- 前回の記事で登録フォームの未入力チェックしか実装できなかったので、今回は半角チェックや文字数チェックおよびエラーメッセージの調整、独自の入力チェックを追加するなど実装しました。
px-wing.hatenablog.com
コード
import React from 'react'
import {Form, Button, Row, Col} from 'react-bootstrap'
import './siginin.css'
import { Formik } from 'formik'
import * as yup from 'yup'
const SignIn = () => {
const schema = yup.object({
userName: yup.string().matches(/^[a-zA-Z0-9!-/:-@¥[-`{-~]*$/, 'ユーザー名は半角英数字と記号のみ').min(4,'ユーザー名は最低4文字です').required('ユーザー名を入力してください。'),
mailAddress: yup.string().email('正しいメールアドレスを入力してください').required('メールアドレスを入力してください。'),
sex: yup.string().required("性別を選択して下さい。"),
birthDay: yup.date().typeError('正しい日付を入力してください').required('誕生日を入力してください。').test('birthDayCheck', '未来の日付を指定することはできません。', (value) => value <= new Date()),
password: yup.string().matches(/^[a-zA-Z0-9!-/:-@¥[-`{-~]*$/, 'ユーザー名は半角英数字と記号のみ').min(8,'パスワードは最低8文字です').required('パスワードを入力してください。'),
passwordConfirm: yup.string().oneOf([yup.ref('password')], 'パスワードが一致しません。').required('パスワードを入力してください。'),
});
return (
<Formik
validationSchema={schema}
onSubmit={(values) => alert(JSON.stringify(values))}
initialValues={{ userName: '', mailAddress: '', sex: '', birthDay: '', password: '',passwordConfirm: ''}}
>
{
({handleSubmit, handleChange, handleBlur, values, errors, touched}) => (
<>
<h4>会員登録フォーム</h4>
<Form noValidate onSubmit={handleSubmit}>
<Form.Group controlId="formGroupName">
<Form.Label>ユーザー名</Form.Label>
<Form.Control name="userName" type="text" placeholder="Enter name" value={values.userName} onBlur={handleBlur} onChange={handleChange} isInvalid={!!(touched.userName && errors.userName)}/>
<Form.Control.Feedback>OK!</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">{errors.userName}</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formGroupEmail">
<Form.Label>メールアドレス</Form.Label>
<Form.Control name="mailAddress" type="email" placeholder="Enter email" value={values.mailAddress} onBlur={handleBlur} onChange={handleChange} isInvalid={!!(touched.mailAddress && errors.mailAddress)}/>
<Form.Control.Feedback>OK!</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">{errors.mailAddress}</Form.Control.Feedback>
</Form.Group>
<Form.Row>
<Form.Group as={Col} md="3" controlId="validationSex">
<Form.Label>性別</Form.Label>
<div key='inline-radio' required>
<Form.Check inline label="男性" name="sex" type='radio' id='inline-radio-1' value='男性' onBlur={handleBlur} onChange={handleChange} isInvalid={!!(touched.sex && errors.sex)}/>
<Form.Check inline label="女性" name="sex" type='radio' id='inline-radio-2' value='女性' onBlur={handleBlur} onChange={handleChange} isInvalid={!!(touched.sex && errors.sex)}/>
<div className='text-danger'>{errors.sex}</div>
</div>
</Form.Group>
<Form.Group as={Col} md="9" controlId="validationBirthDay">
<Form.Label>誕生日</Form.Label>
<Form.Control name="birthDay" type="date" placeholder="Enter Birthday" value={values.birthDay} onBlur={handleBlur} onChange={handleChange} isInvalid={!!(touched.birthDay && errors.birthDay)}/>
<Form.Control.Feedback>OK!</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">{errors.birthDay}</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Group controlId="formGroupPassword">
<Form.Label>パスワード</Form.Label>
<Form.Control name="password" type="password" placeholder="Password" value={values.password} onBlur={handleBlur} onChange={handleChange} isInvalid={!!(touched.password && errors.password)}/>
<Form.Control.Feedback>OK!</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">{errors.password}</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formGroupPasswordConfirm">
<Form.Label>パスワード(確認用)</Form.Label>
<Form.Control name="passwordConfirm" type="password" placeholder="Password" value={values.passwordConfirm} onBlur={handleBlur} onChange={handleChange} isInvalid={!!(touched.passwordConfirm && errors.passwordConfirm)}/>
<Form.Control.Feedback>OK!</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">{errors.passwordConfirm}</Form.Control.Feedback>
</Form.Group>
<div className='text-center'>
<Button variant="primary" type="submit">ユーザー登録</Button>
</div>
</Form>
</>
)}
</Formik>
)
}
export default SignIn
完成画面
次回
- express側にPOSTしてDBに格納してまで。