jQuery.validate.js

13305 단어 jQuery
jQuery에서 양식에 입력된 플러그인을 확인합니다.

download


jQuery plugin: Validation

sample1


간단한 예
sample1.html
<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Validate</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
    $("#myform").validate();
});
    </script>
  </head>
  <body>
    <form id="myform" method="POST" action="./index.html">
      <input type="text" class="required" name="comment"/>
      <input type="submit" />
    </form>
  </body>
</html>
아무것도 입력하지 않은 상태에서 아래의 오류를 표시합니다.
sample1

sample2


입력 검사의 내용을 지정합니다.
sample2.html
<!DOCTYPE html>
<html>
  <head>
    <title>title</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
    $("#myform").validate({
        rules : {
            comment: {
                required: true,
                minlength: 5
            }
        }
    });
});
    </script>
  </head>
  <body>
    <form id="myform" method="POST" action="./index.html">
      <input type="text" name="comment"/>
      <input type="submit" />
    </form>
  </body>
</html>
글자 수가 5자 이하이면 다음과 같은 오류가 표시됩니다.
sample2

sample3


잘못된 정보를 일본어로 바꾸다.
sample3.html
<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Validate</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
  $("#myform").validate({
    rules : {
      comment: {
        required: true,
        minlength: 5
      }
    },
    messages: {
      comment: {
        required: "コメントが未入力です",
        minlength: $.format("{0}文字以上入力してください")
      }
    }
  });
});
    </script>
  </head>
  <body>
    <form id="myform" method="POST" action="./index.html">
      <input type="text" class="required" name="comment"/>
      <input type="submit" />
    </form>
  </body>
</html>
오류 메시지가 일본어에 있습니다!
sample3

sample4


오류 메시지의 스타일을 변경합니다.
오류가 발생하면class 속성에 "error"를 추가합니다.
↓ 오류 발생 전
sample4
↓ 오류 발생 후
sample5
다음 스타일을 적용하면
style.css
label.error {
  color: red;
}
잘못된 정보가 적자로 바뀌다!
sample6

sample5


오류 메시지의 요소를 변경합니다.
errClass 및 errorElement 속성 값을 사용하여 사용자 정의할 수 있습니다.
script.js
$("#myform").validate({
  rules : {
    comment: {
      required: true,
      minlength: 5
    }
  },
  messages: {
    comment: {
      required: "コメントが未入力です",
      minlength: $.format("{0}文字以上入力してください")
    }
  },
  errorClass: "myError",
  errorElement: "h1"
});
스타일도 자유롭게 설정할 수 있다.
style.css
h1.myError {
  background-color: red;
}
sample7
두 갈래 나무의 최대 너비 계산 (비귀속)
프로그래밍의 아름다움 재건 두 갈래 나무

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage