Alpine.js 기초 유효성 (validation) 체크 #2

Alpine.js 기초
유효성 (validation)
체크
#2

 

 

---

 

상황

• Alpine.js 기초, 셋팅 #1 에 이어 이제 유효성 체크를 해보려한다.

 

개발 - 유효성 체크

• 오류나 장애로 인한 처리는 일단 표시만 해놓고 backend 처리할때 추가작업을 해준다.

1. defaultChkTime (기본 인증번호 유효시간)을 alpine.data에 추가 한다. (기본값 60초)
2. displayChkTime (표시해줄 인증번호 유효시간)도 alpine.data 에 추가한다, 기본값 0
3. 인증번호 입력창은 처음은 disable 상태로 시작한다.
4. 이름은 require, 핸드폰번호는 require + 휴대폰양식(숫자만) validation 체크를 한다.
5. 이름 핸드폰번호 둘중 하나라도 입력이 안되있거나, validation 체크를 통과하지 못했다면 사유를 사용자에게 알려준다.

 

• 1번 defaultChkTime, 2번 displayChkTime 변수는 Alpine data에 추가해준다.

document.addEventListener('alpine:init', () => {
    Alpine.data('data', () => ({
        title : '인증하기',
        table : {
            nameLabel: '이름', 
            nameInput: '', 
            phoneLabel: '핸드폰 번호<br>(\'-\'제외)',
            phoneInput: '',
            authNumSendBtnLabel: '인증번호전송',
            authNumLabel: '인증번호',
            authNumInput: ''
        },
        confirmBtnLabel : '확인하기',
        realNameAuthBtnLabel : '실명인증',
        defaultChkTime: 60, //기본값
        displayChkTime: 0,
    }));
});

 

• 3번은 인증번호 입력 input 에 x-bind로 displayChkTime (인증번호유효시간)이 1보다 작으면 (인증번호 유효시간 60초동안만 활성화) 비활성화 시키도록 식을 넣어준다. displayChkTime < 1

<!-- 인증번호 입력창 -->
<input type="text" x-model="table.authNumInput" x-bind:disabled="displayChkTime < 1" />

 

• iodine 8.3.0 버전을 사용해서 validation 체크를 좀 편하게 하려고, 유틸성으로 개발해놓았다. (필요하면 가져다 써도됩니다.)validation.js 에서 만들어놓은 x-validation (directive) 와 $validationMsg(magic) 를 사용해서 유효성 체크를 진행한다.

validation.js

0.01MB

• 입력창 element와 유효성 체크 후 오류메시지를 보여줄 element 를 셋트로 다음과 같이 구성한다.

* x-validation="['required']" 은 체크할 유형으로 rule을 적어주면된다.
- rule은 validation.js 를 열어보면 messages에 정의된 key를 적어주면된다. boolean, date, beforeOrEqual등.

* rule 자체를 추가하는 방법은 validation.js에 76번째 줄을 참고한다.

$validationMsg는 유효성 체크 후 오류가 났을때 메시지를 가져오는 함수로 파라미터는 다음과 같다.
- 인자로 대상 입력창의 id

$validationMsg은 넘어온 입력창에 연결된 라벨을 보고 메시지 조합을 하기 때문에 label에 for는 꼭 적어줘야한다.

• 4번, 5번 처리를 위해 이름과 핸드폰번호를 다음과 같이 validation체크 를 달아주고, th에 header로 줬던 text를 label로 빼고, for를 달아준다 

<div x-data="data">
  <h1 x-text="title"></h1>
  <table>
    <tr>
      <!-- 단방향 바인딩 (x-text) -->
      <th>
        <label x-text="table.nameLabel" for="nameInpt"> </label>
      </th>
      <td>
        <!-- 양방향바인딩 input -->
        <input id="nameInpt" type="text" x-model="table.nameInput" x-validation="['required']"></input>
        <br>
        <!-- 유효성 체크 -->
        <span x-text="$validationMsg('nameInpt')"></span>
      </td>
    </tr>
    <tr>
      <!-- 단방향 바인딩 x-html -->
      <th>
        <label x-html="table.phoneLabel" for="phoneInput"> </label>
      </th>
      <td>
        <!-- 양방향바인딩 x-model -->
        <input id="phoneInput" type="text" x-model="table.phoneInput" x-validation="['required','cellphone']" />
        <button x-text="table.authNumSendBtnLabel" @click="sendAuthNumber()"></button>
        <br>
        <!-- 유효성 체크 에러 메시지 -->
        <span x-text="$validationMsg('phoneInput')"></span>
      </td>
    </tr>
    <tr>
      <!-- 단방향 바인딩 x-text -->
      <th>
         <label x-text="table.authNumLabel" for="authNumInput"> </label>
      </th>
      <td>
        <!-- 양방향바인딩 x-model -->
        <!-- 인증번호 입력창 -->
        <input id="authNumInput" type="text" x-model="table.authNumInput" x-bind:disabled="displayChkTime < 1" />
        <button x-text="confirmBtnLabel"></button>
      </td>
    </tr>
  </table>
</div>

 

• 이름, 핸드폰번호를 썻다 지우면 벨리데이션 체크해서 아래 메시지를 띄워준다.

 

• 다음장에서는 클릭 이벤트들을 달아보자.