React 웹앱에 입력 양식 마스크 및 유효성 검사 기능 추가

Input React 웹앱에 입력 양식 마스크 및 유효성 검사 기능 추가

추천0

페이지 정보

작성자 GrapeCity

작성일 2022-09-15 10:21 조회 601회 댓글 0건

본문

관련링크

양식 요소는 웹사이트에서 사용자로부터 필요로 하는 정보를 수집하는 일반적인 방법입니다. 일반적으로 <input> 요소, 체크박스, 라디오 버튼 및 사용자가 입력한 정보를 제출하기 위한 버튼으로 구성되어 있습니다. 하지만 표준 <input> 요소를 통해 사용자는 원하는 것은 무엇이든 입력할 수 있으며 입력한 정보를 표준화하려는 경우 해당 기능을 구현할 개발자에게 달려 있습니다.

여기서 InputMask가 수신됩니다. Wijmo의 React InputMask 컨트롤을 통해 개발자는 입력 필드에 대해 마스크와 사전 정의된 형식을 쉽게 구현할 수 있습니다. 이는 사용자가 마스크에 입력할 수 있는 문자 수, 컨트롤에 표시된 프롬프트 문자 및 컨트롤을 통해 사용자가 숫자, 글자 또는 모두를 입력할 수 있는지 여부를 제한할 수 있습니다.

이 문서에서는 다음 단계를 간략하게 설명합니다.

React 양식 만들기
Wijmo의 React InputMask 구현
마스크 및 프롬프트 문자 정의
사용자의 정보 유효성 검사

프로젝트를 다운로드하려는 경우 여기에서 찾을 수 있습니다.

React 양식 만들기

살펴볼 첫 번째 사항은 React 양식을 만드는 것입니다. App.js 파일을 열고 양식의 다음 마크업을 추가합니다.

<div class="form-control">
<div class="form-header">
  <span>User Information</span>
</div>
<form class="form-body" onSubmit={submitForm}>
  <div class="form-footer">
    <button class="form-button" type="submit">Submit</button>
  </div>
</form>
</div>

양식을 사용하여 사용자와 React의 onSubmit 마크업에서 데이터를 집계하여 양식을 제출하는 경우 양식에 메서드를 묶어 처리합니다.

이 섹션에서 수행할 다른 작업은 양식의 스타일을 추가하는 것입니다. App.css 파일을 열고 다음 CSS를 추가합니다.

.form-control {
 position: absolute;
 width: 400px;
 height: 300px;
 z-index: 15;
 top: 50%;
 left: 50%;
 margin: -150px 0 0 -200px;
 border-radius: 15px;
 box-shadow: 1px 0 5px -2px rgb(90, 90, 90);
 text-align: center;
}

.form-header {
 height: 50px;
 width: 100%;
 line-height: 50px;
 border-top-left-radius: 15px;
 border-top-right-radius: 15px;
 background: rgb(100, 100, 252);
 font-weight: bold;
 font-size: larger;
 color: white;
}

.form-body {
 height: 100%;
 position: relative;
}

.form-footer {
 position: absolute;
 bottom: 75px;
 right: 2px;
 height: 50px;
 width: 100%
}

.form-button {
 float: right;
 margin-top: 10px;
 margin-right: 10px;
 height: 40px;
 width: 100px;
 border-radius: 10px;
 border: 1px solid black;
 background: rgb(100, 100, 252);
 color: white;
 font-size: 16px;
}

.form-button:hover {
 cursor: pointer;
 background: rgb(140, 140, 255);
}

방금 작성한 CSS는 페이지에서 양식을 중간으로 지정하고 헤더, 푸터 및 버튼 요소의 스타일을 지정합니다. 이제 응용 프로그램을 실행하면 다음 내용을 볼 수 있습니다.

사용자 정보

Wijmo의 React InputMask 구현

이제 양식이 만들어졌으며 InputMask를 추가할 시간입니다. Wijmo를 사용하려면 라이브러리를 프로젝트에 추가해야 합니다. 명령 프롬프트를 열고 프로젝트가 저장된 위치로 이동하고 다음을 실행합니다.

npm i @grapecity/wijmo.react.all

NPM에서 모든 파일을 설치하면 App.js 파일을 엽니다. 이제 Wijmo를 포함하였으며 제품에 필요한 Wijmo 파일을 가져와야 합니다.

import * as wjcCore from '@grapecity/wijmo';
import * as wjcInput from '@grapecity/wijmo.react.input';

마지막 작업은 Wijmo의 CSS 라이브러리를 응용 프로그램에 추가하는 것입니다. index.css 파일을 열고 다음을 추가합니다.

@import '@grapecity/wijmo.styles/themes/wijmo.theme.material.css';
body {
 box-sizing: boder-box;
 font-family: sans-serif;
}

모든 작업이 완료되면 이제 Wijmo의 React InputMask를 사용할 수 있습니다. App.js 파일로 돌아가 다음 마크업을 <form> 요소 내부에 추가합니다.

<div className="form-element">
<wjcInput.InputMask ref={name} id="name" placeholder="Name"></wjcInput.InputMask>
</div>
<div className="form-element">
<wjcInput.InputMask ref={email} id="email" placeholder="Email"></wjcInput.InputMask>
</div>
<div className="form-element">
<wjcInput.InputMask ref={phone} id="phone" placeholder="Phone Number"></wjcInput.InputMask>
</div>
<div className="form-element">
<wjcInput.InputMask ref={social} id="social" placeholder="Social Security Number"></wjcInput.InputMask>
</div>

여기에서는 4개의 InputMask, 즉 이름, 이메일, 전화번호 및 주민 등록 번호당 하나씩을 구현하겠습니다. 각 마스크에 대한 자리 표시자 값도 설정하며 이로 인해 사용자가 예상 입력을 알 수 있도록 InputMask 내에 표시됩니다.

마지막으로 해야 할 작업은 일부 CSS를 추가하여 InputMask의 스타일을 지정하는 것입니다.

.form-element {
 text-align: center;
 margin-top: 15px;
 width: 100%;
}

이제 응용 프로그램을 실행하면 다음 내용을 볼 수 있습니다.

사용자 정보

마스크 및 프롬프트 문자 정의

이제 InputMask를 구현했으며 컨트롤의 마스크 및 프롬프트 문자를 설정하는 방법에 대해 살펴보겠습니다. 이 샘플에서는 전화번호 및 주민 등록 번호 입력에 대한 마스크와 프롬프트 문자를 정의하려고 합니다. 이러한 InputMask 모두에 대한 마크업을 수정하겠습니다.

<wjcInput.InputMask ref={phone} id="phone" placeholder="Phone Number" mask="000-000-0000" isRequired={false} value="" promptChar="#"></wjcInput.InputMask>
<wjcInput.InputMask ref={social} id="social" placeholder="Social Security Number" mask="000-00-0000" isRequired={false} value="" promptChar="*"></wjcInput.InputMask>

마스크 속성에서 숫자를 사용하여 InputMask에 컨트롤에서 입력할 때 숫자와 사용자가 입력해야 할 문자 수만 허용하려는 것을 알리겠습니다.

prompChar 속성을 설정하면 계속 입력이 필요한 값을 표시하려고 하는 문자를 컨트롤에 알립니다. 마지막으로 isRequired 및 값 속성을 설정하면 자리 표시자가 프롬프트 문자를 표시하도록 기본값을 설정하는 대신 계속해서 표시할 수 있습니다.

이제 응용 프로그램을 실행하고 전화나 주민 등록 InputMask에 입력을 시작하면 다음과 같아집니다.

사용자 정보

보시다시피 이러한 InputMask에 입력하면 컨트롤에서 예상하는 나머지 문자에 대해 프롬프트 문자가 표시됩니다.

사용자의 정보 유효성 검사

이 문서에서 알아볼 마지막 사항은 사용자의 정보를 유효성 검사하는 방법입니다. 이 양식의 경우 "이름" 및 "이메일" InputMask에 입력을 정보하고 "전화번호" 및 "주민 등록 번호" InputMask가 완전히 작성되었는지 확인하고자 합니다.

먼저 사용자가 마지막 두 개의 InputMask를 완전히 작성해야 한다는 것을 아는지 확인하겠습니다. 이를 위해 Wijmo의 React InputMask valueChanged 이벤트를 사용하겠습니다. 마크업 내부에서 이벤트를 컨트롤에 추가합니다.

<wjcInput.InputMask ref={phone} id="phone" placeholder="Phone Number" mask="000-000-0000" isRequired={false} value="" promptChar="#" valueChanged={valueChanged}></wjcInput.InputMask>
<wjcInput.InputMask ref={social} id="social" placeholder="Social Security Number" mask="000-00-0000" isRequired={false} value="" promptChar="*" valueChanged={valueChanged}></wjcInput.InputMask>

이제 App.js 파일 내에서 다음 메서드를 구현해보겠습니다.

function valueChanged(ctrl) {
 wjcCore.toggleClass(ctrl.hostElement, 'state-invalid', !ctrl.maskFull);
}

이 메서드는 InputMask의 maskFull 속성이 true를 반환하는지 확인합니다. maskFull은 사용자가 마스크에서 필요한 문자 수를 입력한 경우 true를 반환하며 그렇지 않은 경우 false를 반환하는 부울 값입니다. true를 반환하지 않으면 state-invalid라는 CSS 클래스를 컨트롤에 추가합니다.

CSS 클래스를 App.js 파일에 추가해보겠습니다.

.state-invalid {
 color: red;
}

이제 "전화번호" 또는 "주민 등록 번호" InputMask에 입력하면 다음 내용이 표시됩니다.

사용자 정보

보시다시피 마스크가 완전히 작성되지 않은 경우 텍스트는 빨간색으로 표시됩니다.

다음으로 사용자가 모든 InputMask를 작성했는지 확인할 메서드를 추가하고 양식을 제출할지 여부를 결정할 onSubmit() 메서드를 업데이트하겠습니다.

const name = createRef();
const email = createRef();
const phone = createRef();
const social = createRef();

function isFormComplete() {
 if(name.current.control.value !== '' && name.current.control.value !== '' && name.current.control.maskFull && name.current.control.maskFull) {
   return true;
}
 return false;
}

function submitForm(event) {
 if(isFormComplete()) {
   alert('User Information:\nName: ' + name.current.control.value +
   '\nEmail: ' + email.current.control.value + '\nPhone Number: ' + phone.current.control.value +
   '\nSSN: ' + social.current.control.value)
} else {
   event.preventDefault();
}
}

이제 앱을 실행하고 모든 InputMask를 적절히 작성하는 경우 다음 경고가 표시됩니다.

LocalHost