여행매니아
147
2017-03-20 15:50:18 작성 ∙ 2017-03-21 13:48:22 수정됨
11
5214
#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
9

  • 댓글 11

  • 여행매니아
    147
    2017-03-20 16:11:20 작성 ∙ 2017-03-21 13:48:49 수정됨
    1
  • 리제네아
    2017-03-21 21:55:27

    오 신기하네요 

    좋은 자료 감사합니다.

    1
  • 여행매니아
    147
    2017-03-22 15:26:31

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

    0
  • isNotEmpty
    2017-03-23 16:50:12

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

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


    0
  • 여행매니아
    147
    2017-03-23 17:13:43

    이렇게 하면 됩니다.


    <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
    2017-03-23 18:38:04

    감사합니다!!!

    :-)


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

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

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

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

    감사합니다.

    0
  • isNotEmpty
    2017-03-24 08:49:50

    노는개발자 님//

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

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

    정말 편합니다.

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

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

    0
  • jcheolho
    137
    2017-03-24 22:21:19

    감사합니다

    1
  • roksoulmc
    2017-03-25 01:54:22

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

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