우리가 html의 input 태그를 통해 이메일을 입력 받으려고 할 때, 사용자가 올바르게 입력했는지 정규식을 통해 유효성 검사를 주로 한다.
보통 이를 전송하기 전에 onSubmit 이벤트 핸들러 혹은 별도의 함수에서 유효성 검사를 해주었지만, 정규식을 적용할 수 있는 방법을 찾던 도중 pattern이라는 input attribute를 우연히 찾았다.
jsx 코드이지만 pattern 속성만 확인하면 된다.
<form onSubmit={onSubmit}>
<input
type="text"
name="email"
placeholder="Email"
onChange={onChange}
value={input.email}
pattern="^\w+((\.\w+)?)+@\w+.?\w+\.\w+$"
required
/>
<input
type="password"
name="password"
placeholder="Password"
onChange={onChange}
value={input.password}
pattern=".{6,}"
required
/>
<input type="submit" value="Sign In" required />
</form>email을 입력받는 input의 type을 email로 해주어도 되지만, regex를 통해 제어할 것이므로 text로 해주었다.
이런 식으로 input 태그의 pattern 속성에 정규 표현식을 입력하면, submit 버튼을 눌렀을 때, 유효성 검사를 진행하고 잘못된 입력의 경우 이를 사용자에게 알려준다.
정규 표현식의 작동은 여기서 확인할 수 있다.
