Form 유효성 검사 API
Javascript 2012. 5. 3. 02:24
이전 포스트 주제인 FORM 태그에 관한 내용 중 태그에 관한 정의는 아래와 같다고 말씀드렸습니다.
정의: "웹상에서 사용자 정보를 입력하는 여러(text, button, checkbox, file, hidden, image, password, radio, reset, submit)방식의 영역을 제공하며, 사용자로부터 할당된 데이터를 서버로 전송하는 역활을 담당한다."
즉, 사용자가 입력한 데이터를 서버로 전송하여 사용한다는 말입니다.
하지만 사용자가 입력한 데이터에 대한 유효성 검사 없이 서버로 전송한다는 것은 사용자 접근성 및 데이터 무결성을 보장할 수 없는 방법이며, 만약 클라이언트 단의 유효성 검사를 마쳤다 할지라도 서버단 체크가 이루어지지 않는다면 그것 또한, 데이터 무결성을 보장할 수 없습니다.
즉, 클라이언트 단 검증과 서버 단 검증은 분리시켜 생각해야 한다는 말이며, 클라이언트 단 검증은 그 목적 자체가 사용자 접근성 향상에 있다고 봐도 무방할 것입니다.
아래는 가장 일반적인 형태의 유효성 검사만 다루고 있으므로, 새로운 기능에 대한 확장이 필요한 경우 코드를 추가 / 수정하여 사용하시기 바랍니다.
자바스크립트 소스:
-
// Forms API
-
-
var Forms = (function(win, doc){
-
-
return function(callbacks){
-
-
callbacks = callbacks.constructor === Array ? callbacks : [callbacks];
-
-
function init(){
-
-
this.forms = document.forms;
-
this.$forms = getForms(this.forms, callbacks) || {};
-
-
appendSubmitEvent.apply(this, [this.$forms]);
-
-
return this;
-
}
-
-
Forms.fn = init.prototype = {
-
-
getForms: getForms,
-
valids:
-
{
-
// 빈값 체크
-
empty: function empty(o, opt){
-
-
return new (function(){
-
-
return function()
-
{
-
this.msg = '값을 입력해주세요.';
-
this.exp = null;
-
-
-
extend.call(this, opt);
-
-
this.test = trim(o.value) !== '' ? true : false
-
-
return this;
-
};
-
-
}());
-
-
},
-
-
// 한글 체크
-
han: function(o, opt){
-
-
return new (function(){
-
-
return function()
-
{
-
this.msg = '한글만 입력만 가능합니다.';
-
this.exp = /^([가-힣ㄱ-ㅎ]| ){1,}$/i;
-
-
extend.call(this, opt);
-
-
var val = o.value;
-
-
this.test = (val !== '' && this.exp.test(val)) ? true : false
-
-
return this;
-
};
-
-
}());
-
},
-
-
// 영문 체크
-
eng: function(o, opt){
-
-
return new (function(){
-
-
return function()
-
{
-
this.msg = '영문만 입력만 가능합니다.';
-
this.exp = /^([a-zA-Z]| ){1,}$/i;
-
-
extend.call(this, opt);
-
-
var val = o.value;
-
-
this.test = (val !== '' && this.exp.test(val)) ? true : false
-
-
return this;
-
};
-
-
}());
-
},
-
-
// 문자 체크
-
str: function(o, opt){
-
-
return new (function(){
-
-
return function()
-
{
-
this.msg = '문자를 입력해주세요.';
-
this.exp = /^([\w가-힣]| ){1,}$/i;
-
-
extend.call(this, opt);
-
-
var val = o.value;
-
-
this.test = (val !== '' && this.exp.test(val)) ? true : false
-
-
return this;
-
};
-
-
}());
-
},
-
-
// 숫자 체크
-
num: function(o, opt){
-
-
return new (function(){
-
-
return function()
-
{
-
this.msg = '숫자 입력만 가능합니다.';
-
this.exp = /^([0-9]| ){1,}$/i;
-
-
extend.call(this, opt);
-
-
var val = o.value;
-
-
this.test = (val !== '' && this.exp.test(val)) ? true : false
-
-
return this;
-
};
-
-
}());
-
}
-
-
// 유효성 검사 기능 함수 추가.....
-
}
-
}
-
-
return new init();
-
-
};
-
-
-
function getForms(forms, callbacks){
-
-
var $forms = {};
-
-
for (var i = 0, ilength = forms.length; i < ilength; i++){
-
-
var f = forms[i];
-
-
$forms[f.id] = {
-
f: f,
-
inputs: [],
-
pns: [],
-
callback: callbacks[i]
-
};
-
-
-
for (var k = 0, klength = f.length; k < klength; k++){
-
-
var cs = f[k].className && f[k].className.split(' ');
-
-
for (var t = 0, tlength = cs.length; t < tlength; t++){
-
if (Forms.fn.valids[cs[t]]){
-
$forms[f.id].inputs.push(f[k]);
-
$forms[f.id].pns.push(cs[t]);
-
-
continue;
-
}
-
}
-
}
-
}
-
-
return $forms;
-
};
-
-
-
function appendSubmitEvent(forms){
-
-
var $forms = forms || {};
-
-
for (var n in $forms){
-
-
(function($){
-
-
var f = $.$forms[n].f
-
, inputs = $.$forms[n].inputs
-
, pns = $.$forms[n].pns
-
, callback = $.$forms[n].callback;
-
-
bind(f, 'submit', function(e){
-
-
for (var i = 0, length = inputs.length; i < length; i++){
-
-
var match = $.valids[pns[i]](inputs[i]);
-
-
if (!match.test){
-
alert(match.msg);
-
inputs[i].focus();
-
return false;
-
}
-
}
-
-
if (typeof callback === 'function') callback.call(f);
-
-
});
-
-
})(this);
-
}
-
}
-
-
// 객체 상속 함수
-
function extend(){
-
-
var target = this
-
, opts = []
-
, src = null
-
, copy = null;
-
-
for (var i = 0, length = arguments.length; i < length; i++) {
-
-
opts = arguments[i];
-
-
for (var n in opts) {
-
src = target[n];
-
copy = opts[n];
-
-
if (src === copy) continue;
-
if (copy) target[n] = copy;
-
}
-
}
-
};
-
-
-
function trim(s){
-
-
return s.replace(/(\s)/g, '');
-
};
-
-
})(window, document);
-
-
-
// submit callback 함수
-
var Member = (function(){
-
-
-
return new (function(){
-
-
function init(){
-
-
return this;
-
}
-
-
init.prototype = {
-
login: login
-
};
-
-
-
return init;
-
-
}());
-
-
-
function login(){
-
-
var id = document.getElementById('loginId');
-
var pass = document.getElementById('loginPass');
-
-
if (!id.value || !pass.value) this.submit();
-
}
-
-
})();
-
-
-
// 이벤트 할당
-
function bind(elem, type, handler, capture)
-
{
-
type = typeof type === 'string' && type || '';
-
handler = handler || function(){ ; };
-
-
if (elem.addEventListener){
-
elem.addEventListener(type, handler, capture);
-
}
-
else if (elem.attachEvent){
-
elem.attachEvent('on' + type, handler);
-
}
-
-
return elem;
-
};
-
-
-
-
// api 호출
-
bind(window, 'load', function(){
-
// Forms([callback, callback, callback]);
-
Forms([
-
Member.login,
-
Member.login,
-
Member.login
-
]);
-
});
-
HTML 소스:
-
<form id="login1" method="post" target="login_frm1" action="http://naver.com" enctype="application/x-www-form-urlencoded">
-
<fieldset>
-
<input type="text" id="loginId" name="loginId" value="아이디" class="empty han" />
-
</fieldset>
-
<input type="submit" value="폼제출" />
-
</form>
-
-
-
<!-- 두 번째 폼 -->
-
<form id="login2" method="post" target="login_frm2" action="http://naver.com" enctype="application/x-www-form-urlencoded">
-
<fieldset>
-
<input type="text" id="loginId" name="loginId" value="아이디" class="han class" />
-
<input type="password" id="loginPass" name="loginPass" class="empty class" />
-
<input type="text" id="loginId" name="loginId" value="아이디" class="eng class" />
-
<input type="password" id="loginPass" name="loginPass" class="empty" />
-
<input type="text" id="loginString" name="loginPass" class="str" />
-
<input type="text" id="loginNum" name="loginPass" class="num" />
-
</fieldset>
-
<input type="submit" value="폼제출" />
-
</form>
-
-
-
<!-- 세 번째 폼 -->
-
<form id="login3" method="post" target="login_frm3" action="http://naver.com" enctype="application/x-www-form-urlencoded">
-
<fieldset>
-
<input type="text" id="loginId" name="loginId" value="아이디" class="han class" />
-
<input type="password" id="loginPass" name="loginPass" class="empty class" />
-
<input type="text" id="loginId" name="loginId" value="아이디" class="eng class" />
-
<input type="password" id="loginPass" name="loginPass" class="empty" />
-
<input type="text" id="loginString" name="loginPass" class="str" />
-
<input type="text" id="loginNum" name="loginPass" class="num" />
-
</fieldset>
-
<input type="submit" value="폼제출" />
-
</form>
-
폼 화면: