여행매니아
131
2017-03-20 15:50:18.0 작성 ∙ 2017-03-21 13:48:22.0 수정됨
11
2727
#380856 Tips & 강좌 javascript html form input validate 자바스크립트 입력 검증 자동

자바스크립트 코딩 한 줄도 없이 입력값 검사

특정 입력을 필수입력으로 취급하여 빈 값일 경우 메세지를 나오게 하려면 아래와 같이 하면 된다.

<input data-xr="req()">

필수입력이면서 제대로된 이메일 형식인지 검사하려면 아래와 같이 하면 된다. 하나의 input에 여러가지 검사를 적용할 수 있다.

<input data-xr="req() email()">

필수입력은 아니지만 특정 범위(1~10)의 숫자만 허용하려면 아래와 같이 하면 된다.

<input data-xr="between(1, 10)">

상세한 사용방법은 아래 링크에...

http://xrule.net


7
8

  • 댓글 11

  • 여행매니아
    131
    2017-03-20 16:11:20.0 작성 ∙ 2017-03-21 13:48:49.0 수정됨
    1
  • 리제네아
    1k
    2017-03-21 21:55:27.0

    오 신기하네요 

    좋은 자료 감사합니다.

    1
  • 여행매니아
    131
    2017-03-22 15:26:31.0

    시간되는 데로 좀 더 편리하게 사용하는 방법을 공유해볼께요.

    0
  • isNotEmpty
    1k
    2017-03-23 16:50:12.0

    onsubmit을 하지 않고 데이터 검증은 어떻게 하나요....

    항상 제이쿼리로 serialize로 데이터 post로 만들어서 ajax로 보내거든요.. ㅠ


    0
  • 여행매니아
    131
    2017-03-23 17:13:43.0

    이렇게 하면 됩니다.


    <script src="xrule.min.js"></script>
<script>
function f() {
    if (xr(document.getElementById("div1"))) {
        //모든데이터가 정상이면 여기로 옵니다. AJAX 통신 하면 됩니다.
        alert("ok");
    }
}
</script>
<div id="div1">
    <input data-xr="req() email()"><br>
    <input data-xr="req() num()">
</div>
<button onclick="f()">GO</button>


    2
  • isNotEmpty
    1k
    2017-03-23 18:38:04.0

    감사합니다!!!

    :-)


    1
  • 서비스지향개발자
    5k
    2017-03-24 08:06:50.0

    좋은포스팅 좋은질문 감사드립니다.

    혹시 메세지 변경은 어떻게 하나요? 

    어딘가 있겠지만 간단하면 한줄 부탁드립니다.

    감사합니다.

    0
  • isNotEmpty
    1k
    2017-03-24 08:49:50.0

    노는개발자 님//

    https://www.slideshare.net/JinhyunSim/xrule

    여기 가셔서 슬라이드 7페이지 보시면 될 것 같습니다.

    정말 편합니다.

    1
  • 서비스지향개발자
    5k
    2017-03-24 09:22:36.0

    ㅎㅎ 정말 감사합니다ㅎㅎㅎ

    0
  • propoger
    102
    2017-03-24 22:21:19.0

    감사합니다

    1
  • roksoulmc
    239
    2017-03-25 01:54:22.0

    ajax로 inner html된 상태에서도 유효 한가요?

    0
  • 로그인을 하시면 댓글을 등록할 수 있습니다.