Javascript Form Input Validator. 어떤 웹 개발 프로젝트에서 입력양식(Form)이 100개가 있고 각 Form은 평균 10개의 Input을 가진다면 Front End 개발자는 1,000개의 Input에 대한 유효성 검증 코드를 작성해야 한다. 그러나 그 1,000개의 Input 중에는 중복된 검사 로직을 가지고 있는 Input들도 많이 있다. 그러한 불필요한 코드를 획기적으로 줄일 수 있는 방법이 있다. 바로 엑스룰(XRule) 이다.

1. 자바스크립트 양식입력
자동검사
엑스룰(XRule) Form Input Validator
2016. 06

2. 엑스룰(XRule) 기본 사용법
필수입력이며 이메일형식
유효성 검사를 하고 싶은 INPUT 에 data-xr 속성만
정의하면 된다. 별도 자바스크립트 코드는 필요없음.

3. 웹 어플리케이션 입력값 검증
어떤 웹 개발 프로젝트에서 입력양식(Form)이
100개가 있고 각 Form은 평균 10개의 Input을
가진다면 Front End 개발자는 1,000개의 Input에
대한 유효성 검증 코드를 작성해야 한다.
그러나 그 1,000개의 Input 중에는 중복된 검사
로직을 가지고 있는 Input들도 많이 있다.
그러한 불필요한 코드를 획기적으로 줄일 수
있는 방법이 있다. 바로 엑스룰(XRule) 이다.

4. HTML5 기본 제공 검사 엑스룰(XRule)
• HTML5 신규기능 이므로
HTML4 에서 동작하지 않음.
• 새로운 규칙 추가 어려움.
• 메시지 변경이 어려움.
• 브라우저마다 표현 UI가
다름.
• HTML4 이상 지원.
• 사용자 정의 규칙 지원.
• 다국어 메시지 지원.
• 사용자 정의 UI 지원.
• 원하는 시점에 유효성 검사.
• 상세한 디버깅 정보 제공.
HTML5 기본 vs 엑스룰(XRule)

5. 엑스룰(XRule) 내장규칙

6. 엑스룰(XRule) 사용자 정의 규칙
xr.put(규칙명, 메세지, 검사로직) 함수를 이용하면 새로운 규칙을 추가할 수 있음.
data-xr 속성에 새로 정의한 규칙을 사용.
위 예제는 ‘aaa’, ‘bbb’ 그리고 ‘ccc’ 만 허용하고 나머지는 오류 메세지 발생.

7. 엑스룰(XRule) 다국어 지원
• 엑스룰(XRule)의 내장규칙의 메시지는 모두 영어
• xr.put() 함수를 이용하여 기존 메시지를 변경할 수 있음.

8. 엑스룰(XRule) 사용자 정의 UI(1)
xr(target, callback); //함수의 프로토타입
일반적으로 callback을 생략하고 사용.
XRule은 기본적으로 오류 메세지를 alert() 을 이용하여
보여줌.
사용자의 입장에서 불편할 수 있고 디자인 미관상 투박할 수
있음.
callback을 이용하여 해결할 수 있음.
예제코드는 다음 슬라이드에...

9. 엑스룰(XRule) 사용자 정의 UI(2)
예제코드의 실행결과는 다음 슬라이드에...

10. 엑스룰(XRule) 사용자 정의 UI(3)
이것은 하나의 예제일 뿐,
xr(target, callback); //함수의 프로토타입
을 이용하면 다양하고 효율적인 방법으로 사용자로 하여금
입력값을 수정할 수 있도록 유도할 수 있다.

11. 엑스룰(XRule) 홈페이지
http://xrule.net
보통 INPUT 필드 하나의 입력값 검증을 위하여 5~10줄 혹은 그 이상의
JAVASCRIPT 코드가 필요하다. if, else… 다양한 경우를 비교하여 적절한 메세지를
뿌려야 하기 때문이다.
그 작업은 개발속도를 느리게 하고 유지보수 비용을 높인다. 코드를
복사/붙여넣기 하다 보면 버그가 생기기도 하고 사용자 요구가 변경되면 여러
파일을 수정해야 하기 때문이다.
이제 그런 의미없는 단순반복 막노동과 이별할 시간이다. ^^