Computer/JavaScript

폼 검사기

알찬돌삐 2012. 8. 10. 16:35

 

 

개발용 버전

서비스용 버전

 


항목이 입력되었는지 검사

사용자가 해당 항목에 값을 입력하였는지 아닌지를 검사한다. 검사 항목에 required 속성을 부여하면 사용자가 해당 항목을 입력하지 않았을 때 에러를 반환한다. 다음 예제를 실행해보자.

전화번호

아래는 phone이라는 항목에 required 속성을 부여하는 부분이다. 여기서 phone이라는 문자열은 조건을 부여할 항목을 가리키는데 이는 폼이 지정된 경우에는 해당 항목의 name 속성을 가리키는 문자열일 수 있고 해당 항목의 ID 속성을 가리키는 문자열 혹은 DOM model을 지정할 수 있다.

v.add("phone", {
    required: true
});

아래는 예제 전체 코드이다.

<script type="text/javascript">
// <![CDATA[
function checkForm(form) {
    var v = new MiyaValidator(form);
    v.add("phone", {
        required: true
    });
    var result = v.validate();
    if (!result) {
        alert(v.getErrorMessage());
        v.getErrorElement().focus();
    } else {
        alert("감사합니다!");
    };
    return false;
};
// ]]>
</script>
<form action="somewhere" onsubmit="return checkForm(this)">
    <fieldset>
        <label>전화번호 <input type="text" name="phone" size="12" /></label>
        <input type="submit" value="제출" />
    </fieldset>
</form>

△ Contents

여러 항목 중 지정 항목 이상이 입력되었는지 검사

사이트를 만들 때 전화번호와 핸드폰번호 중 한가지는 반드시 입력받게 하는 경우가 있다. 그 외에도 여러 항목 중 몇 가지 이상, 혹은 몇 가지 이하로 입력받아야 하는 경우가 생긴다. 다음의 예제를 실행해보자. 전화번호와 핸드폰번호 중 한가지는 반드시 입력받는 예제이다.

전화번호
핸드폰번호

아래는 예제 전체 코드이다.

<script type="text/javascript">
// <![CDATA[
function checkForm7(form) {
    var v = new MiyaValidator(form);
    var cond1 = new MiyaCondition("phone", {
        required: true,
        option: "phone"
    }, null, form);
    var cond2 = new MiyaCondition("cell", {
        required: true,
        option: "handphone"
    }, null, form);
    v.addGroup([cond1, cond2], {
        requiremin: 1
    });
    var result = v.validate();
    if (!result) {
        var msg = v.getErrorMessage();
        alert(msg);
        v.getErrorElement().focus();
    } else {
        alert("감사합니다!");
    };
    return false;
};
// ]]>
</script>
<form action="somewhere" onsubmit="return checkForm7(this);">
    <fieldset>
        <label>전화번호 <input type="text" name="phone"
            size="12" /></label><br />
        <label>핸드폰번호 <input type="text" name="cell"
            size="12" /></label><br />
        <input type="submit" value="제출" />
    </fieldset>
</form>

△ Contents

두 항목의 입력값이 동일한지 검사

비밀번호를 입력받을 경우 입력되는 값이 사용자에게 표시되지 않기 때문에 오타 방지를 위해 같은 값을 중복하여 입력받는 경우가 많다. 아래의 예제는 그러한 경우 두 항목의 입력값이 같은지를 검사할 수 있게 해준다.

비밀번호 비밀번호 확인

아래는 password이라는 항목에 입력값이 동일한지 검사하는 match 속성을 부여하는 부분이다. match 속성에 입력값이 동일한지 검사할 또 다른 항목을 정의한다.

v.add("password", {
        required: true,
        match: "password2"
    });

match 속성은 두 항목이 전부 비어있을 경우 에러를 반환하지 않기 때문에 필수값 지정을 위해서는 required 속성과 함께 사용하여야 한다.

아래는 예제 전체 코드이다.

<script type="text/javascript">
// <![CDATA[
function checkForm2(form) {
    var v = new MiyaValidator(form);
    v.add("password", {
        required: true,
        match: "password2"
    });
    var result = v.validate();
    if (!result) {
        alert(v.getErrorMessage());
        v.getErrorElement().focus();
    } else {
        alert("감사합니다!");
    };
    return false;
};
// ]]>
</script>
<form action="somewhere" onsubmit="return checkForm2(this)">
    <fieldset>
        <label>비밀번호 <input type="password" name="password" size="12" /></label>
        <label>비밀번호 확인 <input type="password" name="password2" size="12" /></label>
        <input type="submit" value="제출" />
    </fieldset>
</form>

△ Contents

입력된 내용의 Byte를 제한

회원가입 시 입력받는 아이디는 보통 길이제한을 둔다. 또 너무 짧은 아이디는 만들지 못하게 하기도 한다. 그런 경우 몇 글자 이상 몇 글자 이하로 입력받게 되는데 몇 글자 이하와 같은 경우에는 HTML의 maxlength 속성을 사용할 수 있는데 한글과 같은 2 byte 문자가 허용되는 경우에는 그 속성이 한계가 있다.

아래의 예제는 아이디를 4~12 byte로 입력받는 예제이다.

아이디

minbyte와 maxbyte 속성을 사용하면 입력값의 최소 byte와 최대 byte를 지정하여 너무 짧거나 너무 긴값을 입력받았을 때 사용자에게 알려줄 수 있다.

아래는 loginid 항목을 4~12 byte 사이의 필수항목으로 설정하는 예제이다.

v.add("loginid", {
    required: true,
    minbyte: 4,
    maxbyte: 12
});

입력값이 비어있을 경우에는 minbyte와 maxbyte 속성이 무시되기 때문에 반드시 입력받아야 하는 경우 required 속성과 같이 사용하면 된다.

아래는 예제 전체 코드이다.

<script type="text/javascript">
// <![CDATA[
function checkForm3(form) {
    var v = new MiyaValidator(form);
    v.add("password", {
        required: true,
        minbyte: 4,
        maxbyte: 12
    });
    var result = v.validate();
    if (!result) {
        alert(v.getErrorMessage());
        v.getErrorElement().focus();
    } else {
        alert("감사합니다!");
    };
    return false;
};
// ]]>
</script>
<form action="somewhere" onsubmit="return checkForm3(this)">
    <fieldset>
        <label>아이디 <input type="text" name="loginid" size="12" /></label>
        <input type="submit" value="제출" />
    </fieldset>
</form>

△ Contents

체크박스 항목의 선택된 항목수를 검사

체크박스의 선택된 항목수를 검사한다. 항목에 mincheck, maxcheck 속성을 부여하여 검사를 수행한다. 아래의 예제는 관심분야를 2개 이상 4개 이하로 입력받는 예제이다.

관심분야 HTML CSS JavaScript DOM PHP Ruby Java C

아래는 favorites[] 항목을 2~4 개 사이로 선택받는 예제이다.

v.add("favorites[]", {
    required: true,
    mincheck: 2,
    maxcheck: 4
});

하나도 선택받지 않았을 경우 mincheck와 maxcheck 속성이 무시되기 때문에 반드시 선택받아야 하는 경우 required 속성과 같이 사용하면 된다.

아래는 예제 전체 코드이다.

<script type="text/javascript">
// <![CDATA[
function checkForm11(form) {
    var v = new MiyaValidator(form);
    v.add("favorites[]", {
        required: true,
        mincheck: 2,
        maxcheck: 4
    });
    var result = v.validate();
    if (!result) {
        alert(v.getErrorMessage());
        v.getErrorElement().focus();
    } else {
        alert("감사합니다!");
    };
    return false;
};
// ]]>
</script>
<form action="somewhere" onsubmit="return checkForm11(this)">
    <fieldset>
        관심분야
        <label><input type="checkbox" name="favorites[]" value="HTML">HTML</label>
        <label><input type="checkbox" name="favorites[]" value="CSS">CSS</label>
        <label><input type="checkbox" name="favorites[]" value="JavaScript">JavaScript</label>
        <label><input type="checkbox" name="favorites[]" value="DOM">DOM</label>
        <label><input type="checkbox" name="favorites[]" value="PHP">PHP</label>
        <label><input type="checkbox" name="favorites[]" value="Ruby">Ruby</label>
        <label><input type="checkbox" name="favorites[]" value="Java">Java</label>
        <label><input type="checkbox" name="favorites[]" value="C">C</label>
        <input type="submit" value="제출" />
    </fieldset>
</form>

△ Contents

다중 콤보박스(multiple 속성이 지정된 select 객체)의 선택된 항목수를 검사

다중 선택이 가능한 콤보박스의 선택된 항목수를 검사한다. 항목에 minselect, maxselect 속성을 부여하여 검사를 수행한다. 아래의 예제는 관심분야를 2개 이상 4개 이하로 입력받는 예제이다.

관심분야 HTML CSS JavaScript DOM PHP Ruby Java C

아래는 favorites 항목을 2~4 개 사이로 선택받는 예제이다.

v.add("favorites", {
    required: true,
    minselect: 2,
    maxselect: 4
});

하나도 선택받지 않았을 경우 minselect와 maxselect 속성이 무시되기 때문에 반드시 선택받아야 하는 경우 required 속성과 같이 사용하면 된다.

아래는 예제 전체 코드이다.

<script type="text/javascript">
// <![CDATA[
function checkForm4(form) {
    var v = new MiyaValidator(form);
    v.add("favorites", {
        required: true,
        minselect: 2,
        maxselect: 4
    });
    var result = v.validate();
    if (!result) {
        alert(v.getErrorMessage());
        v.getErrorElement().focus();
    } else {
        alert("감사합니다!");
    };
    return false;
};
// ]]>
</script>
<form action="somewhere" onsubmit="return checkForm4(this)">
    <fieldset>
        <label>관심분야
            <select name="favorites" multiple="multiple">
                <option>HTML</option>
                <option>CSS</option>
                <option>JavaScript</option>
                <option>DOM</option>
                <option>PHP</option>
                <option>Ruby</option>
                <option>Java</option>
                <option>C</option>
            </select>
        </label>
        <input type="submit" value="제출" />
    </fieldset>
</form>

△ Contents

이메일 형식의 검사

이메일 형식과 같이 특정한 형식을 입력받는 경우가 있다. Miya Validator에서는 Miya Format 객체를 통해 이 형식을 검사한다. Miya Validator의 FORMAT_MAP 상수에 정의된 속성을 option 속성에 지정하여 검사한다. 다음은 이메일 형식의 검사 예제이다.

이메일

아래는 youremail이라는 항목에 option 속성을 부여하는 부분이다. email로 option 속성을 정의하면 Miya Validator는 FORMAT_MAP에서 email 선언을 찾아 그 선언이 지시하는 함수를 검사에 사용한다.

v.add("youremail", {
    option: "email"
});

아래는 예제 전체 코드이다.

<script type="text/javascript">
// <![CDATA[
function checkForm5(form) {
    var v = new MiyaValidator(form);
    v.add("youremail", {
        option: "email"
    });
    var result = v.validate();
    if (!result) {
        alert(v.getErrorMessage());
        v.getErrorElement().focus();
    } else {
        alert("감사합니다!");
    };
    return false;
};
// ]]>
</script>
<form action="somewhere" onsubmit="return checkForm5(this)">
    <fieldset>
        <label>이메일 <input type="text" name="youremail" size="50" /></label>
        <input type="submit" value="제출" />
    </fieldset>
</form>

△ Contents

여러 항목으로 분리하여 입력받는 전화번호 형식의 검사

전화번호, 이메일 주소, 우편번호 등은 일정한 형식이 있어 특정문자로 연결된 분리된 텍스트 필드로 된 UI를 제공하기도 한다. 이처럼 전화번호를 입력받는 예제를 소개한다.

전화번호 - -

여기서 첫 번째 텍스트 필드만으로는 사용자가 제대로 된 전화번호를 입력했는지 체크할 수 없고, 세 개의 텍스트 필드를 일일이 검사하는 것은 너무 번거롭기도 하고 사용자에게 피드백을 제공하기도 적절치 못한 방법이다. Miya Validator에서는 span 속성과 glue 속성을 제공하여 이와 같은 검사를 수행하게 해준다. 다음의 코드를 보자.

v.add("phone", {
    option: "phone",
    span: 3,
    glue: "-"
});

여기서 3이라는 span 속성은 phone에 인접한 3개의 폼 컨트롤(phone 포함)의 값을 합쳐 검사하라는 지시이고, "-"라는 glue 속성은 3개의 폼 컨트롤의 값을 합칠 때 중간 중간에 "-" 문자를 넣으라는 지시이다.

아래는 예제 전체 코드이다.

<script type="text/javascript">
// <![CDATA[
function checkForm6(form) {
    var v = new MiyaValidator(form);
    v.add("phone", {
        option: "phone",
        span: 3,
        glue: "-"
    });
    var result = v.validate();
    if (!result) {
        alert(v.getErrorMessage());
        v.getErrorElement().focus();
    } else {
        alert("감사합니다!");
    };
    return false;
};
// ]]>
</script>
<form action="somewhere" onsubmit="return checkForm6(this)">
    <fieldset>
        <label>전화번호 <input type="text" name="phone" size="3" /></label>
        - <input type="text" name="phone2" size="4" />
        - <input type="text" name="phone3" size="4" />
        <input type="submit" value="제출" />
    </fieldset>
</form>

△ Contents

주민등록번호, 숫자 등 다양한 입력 형식의 검사 예제들

option 속성을 통해 제공하는 다양한 입력 형식 검사의 예제들을 제공한다.

주민등록번호 -

외국인등록번호 -

생일

나이

아래는 예제 전체 코드이다.

<script type="text/javascript">
// <![CDATA[
function checkForm12(form) {
    var v = new MiyaValidator(form);
    v.add("jumin", {
        option: "jumin",
        span: 2,
        glue: "-"
    });
    v.add("foreignerno", {
        option: "foreignerno",
        span: 2,
        glue: "-"
    });
    v.add("birthday", {
        option: "isdate"
    });
    v.add("age", {
        required: true,
        option: "number"
    });
    var result = v.validate();
    if (!result) {
        alert(v.getErrorMessage());
        v.getErrorElement().focus();
    } else {
        alert("감사합니다!");
    };
    return false;
};
// ]]>
</script>
<form action="somewhere" onsubmit="return checkForm12(this)">
    <fieldset>
        <p>
            <label>주민등록번호 <input type="text" name="jumin" size="6" maxlength="6" title="주민등록번호 앞자리" /></label>
            - <input type="text" name="jumin2" size="7" maxlength="7" title="주민등록번호 뒷자리" />
        </p>
        <p>
            <label>외국인등록번호 <input type="text" name="foreignerno" size="6" maxlength="6" title="외국인등록번호 앞자리" /></label>
            - <input type="text" name="foreignerno2" size="7" maxlength="7" title="외국인등록번호 뒷자리" />
        </p>
        <p>
            <label>생일 <input type="text" name="birthday" size="12" maxlength="11" value="1990-01-01" /></label>
        </p>
        <p>
            <label>나이 <input type="text" name="age" size="3" maxlength="3" /></label>
        </p>
        <input type="submit" value="제출" />
    </fieldset>
</form>

△ Contents

에러 메시지를 동적으로 선언하기

때로는 자동으로 생성되는 에러 메시지가 어색하거나 사용자에게 다른 피드백을 제공해야 할 경우가 생긴다. 이 때는 어떻게 할까? 항목이 입력되었는지 검사 예제의 에러 메시지를 바꿔보자. 다음 예제를 실행해보자.

전화번호

에러 메시지를 바꾸어 보았다. 기존 검사 조건에 message 속성을 추가하면 원하는 에러 메시지를 표시할 수 있다. 그런데, 예제를 실행시켜보면 `전화번호`라는 단어가 에러 메시지에도 있고 Miya Validator가 기본적으로 제공하는 label(`[전화번호]`)로도 존재하니 약간 어색한 감이 있다. 그럴 때 label 형태는 제거해야 하는 데 어떻게 할까? 다음 예제를 실행해보자.

전화번호

폼 유효성 검사 후 오류 시 에러 메시지를 가져오는 getErrorMessage 함수에 `{message}`라는 문자열을 넣어주었다. Miya Validator에서는 에러 메시지의 형식을 `[{label}] {message}` 형태로 제공하는 데 이는 폼 컨트롤의 label과 오류가 난 조건의 메시지로 치환되는데, `{message}`라는 문자열이 이 형태를 단순히 메시지로만 치환되게 하여주는 것이다. 원한다면 label을 다른 형태로 표시해주는 등 응용도 가능할 것이다.

아래는 두 번째 예제의 전체 코드이다.

<script type="text/javascript">
// <![CDATA[
function checkForm13(form) {
    var v = new MiyaValidator(form);
    v.add("phone", {
        required: true,
        message: "전화번호를 입력하지 않으시면 제가 전화를 할 수가 없어요. ㅠ.ㅠ"
    });
    var result = v.validate();
    if (!result) {
        var msg = v.getErrorMessage("{message}");
        alert(msg);
        v.getErrorElement().focus();
    } else {
        alert("감사합니다!");
    };
    return false;
};
// ]]>
</script>
<form action="somewhere" onsubmit="return checkForm13(this);">
    <fieldset>
        <label>전화번호 <input type="text" name="phone" size="12" /></label>
        <input type="submit" value="제출" />
    </fieldset>
</form>

△ Contents

실시간 검사 (miya_validator_realtime 필요)

Miya Validator의 확장 MiyaValidatorRealtime을 소개한다. Miya Validator는 사용자가 폼 값들을 전부 입력하고 제출하기 버튼을 눌렀을 때 에러 메시지를 표시하는 데, MiyaValidatorRealtime를 사용하면 사용자가 각 폼 컨트롤을 지나칠 때마다 유효성 검사를 통해 즉각적으로 사용자에게 피드백을 전달한다. 간편한 유효성 검사를 넘어 사용자의 편의를 증대시키는 MiyaValidatorRealtime를 추가해보자!

MiyaValidatorRealtimeLiveValidation에서 모티브를 얻어 Miya Validator의 강력한 유효성 검사 기능을 실시간으로 제공하기 위하여 제작하였습니다.

전화번호 - -
주소

아래는 예제 전체 코드이다.

<script type="text/javascript">
// <![CDATA[
addEvent(window, "load", function() {
    var f = document.forms["phoneform"];
    var v = new MiyaValidator(f);
    v.add("phone", {
        required: true,
        span: 3,
        glue: "-",
        option: "phone"
    });
    v.add("address", {
        required: true
    });
    v.enableRealtimeValidation();
    f.onsubmit = function() {
        var result = v.validate();
        if (!result) {
            alert(v.getErrorMessage());
            v.getErrorElement().focus();
        } else {
            alert("감사합니다!");
        };
        return false;
    };
});
// ]]>
</script>
<form name="phoneform" action="somewhere">
    <fieldset>
        <label>전화번호 <input type="text" name="phone" size="12" /></label>
            - <input type="text" name="phone2" size="12" />
            - <input type="text" name="phone3" size="12" /><br />
        <label>주소 <input type="text" name="address" size="50" /></label>
        <input type="submit" value="제출" />
    </fieldset>
</form>

동적으로 생성되어 폼 컨트롤에 인접하여 표시되는 에러 메시지의 마크업은 다음과 같다. 마크업에 대한 CSS를 입맛에 맞게 제작하여 표시한다면 사용자에게 훌륭한 피드백 도구가 될 것이다! 폼 컨트롤과 같은 부모 block element에 포함되는 점을 참고하도록 하자.

<span class="miya-error-wrapper">
    <span class="miya-error-message-before"></span>
    <span class="miya-error-message-wrapper">
        <span class="miya-error-message">반드시 입력하셔야 하는 사항입니다.</span>
    </span>
    <span class="miya-error-message-after"></span>
</span>

△ Contents

이 글은 스프링노트에서 작성되었습니다.

.

'Computer > JavaScript' 카테고리의 다른 글

chrome notification https 미지원  (0) 2018.02.14
화면상의 위치 가져오기  (0) 2012.08.10
키코드 표  (0) 2012.08.10
쿠키  (0) 2012.08.10
자동완성  (0) 2012.08.10