클라이언트 - 사이드 jQuery와 함께 양식 유효성 검사
2008년 11월 6일 필립 Beel · 1 개의 코멘트에 의해 
본 자습서에서는 간단한 문의 양식 bassistance 유효성 jQuery 플러그인을 사용하여 유효성을 검사해야하는지 보여줄 것입니다. 이 전에 제출되었음을 양식을 확인하실 수있습니다. 여기에 데모를 참조하십시오.
1 단계 - 양식
이 같은 양식 아약스 문의 양식 튜토리얼에 대한 기능을했다. 그래서 만약 당신이 원래의 양식을 연장하려면,이 튜토리얼 그렇게 아주 쉽게 할 수 있도록해야합니다.
우리는, 우리는 그것을 contact.html에 우리가 이렇게 우리의 양식을 작성할 것입니다 전화를 새로 시작 파일이 필요합니다.
<div id="container">
<form id="contactForm" method="" action="">
<p>
<label for="name">Name </label>
<input id="name" name="name" />
</p>
<p>
<label for="email">E-Mail </label>
<input id="email" name="email" />
</p>
<p>
<label for="message">Your Message </label>
<textarea id="message" name="message" rows="4" cols="30" >
</textarea>
</p>
<p>
<input class="submit" type="submit" value="submit"/>
</p>
</form>
</div>
이제 우리는 확인한다 2 필드 및 텍스트 상자와 간단한 양식을 가지고.
2 단계 - 플러그인
우리가 사용하는 플러그인은 이곳에서 다운로드받을 수있습니다, 우리 역시 이곳에서 dowloaded 수있습니다 jQuery의 사본이 필요합니다. 지금 우리처럼 이렇게 contact.html 파일을 첨부하는 데 필요한 파일이있다.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
유의하시기 바랍니다 매우 그 첫 번째 jQuery 달리 프레임 워크에서 작동하지 않습니다 전화 중요하지.
3 단계 - 코드
코드 자체는 매우 가볍고 무게, 이것 좀 봐
//initiate validator on load
$(function() {
// validate contact form on keyup and submit
$("#contactForm").validate({
//set the rules for the field names
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 2
},
},
//set messages to appear inline
messages: {
name: "Please enter your name",
email: "Please enter a valid email address",
message: "Please enter your message"
}
});
});
우리가 여기서 뭐하는거야 어떤 형태의 유효성 검증을 사용하여 시작 onload 함수가 호출됩니다. 유효성을 검사하면 몇 가지 플러그인 paramenters 통과가 필요합니다.
규칙 - 당신을 바탕으로, 우리의 경우 우리는 이름, 이메일 주소와 메시지를 사용하고자하는 행동 필드 이름을 지정할 수있습니다. 우리가 만약 입력란은 필수입니다 믿거나 말거나, true 또는 false, 우리는 모든 필드를 확인하려면 전달하여 지정하는의 안쪽이 모든 사실로 표시됩니다. 다음 매개 변수는 ... 당신이 진짜로, 당신은 문자의 최소 수를 설정할 수있습니다 입력해야합니다 Minlength입니다.
개의 메시지 - messge 경우, 기본적으로이 필드 중 하나는 뭔가를 "같은이 필요합니다"라고 제공됩니다 설정하지 않도록 선택한 당신은 특정 분야에 대한 구체적인 메시지를 설정할 수있습니다
4 단계 - 지저분하게 그게 최대
경고 메시지가 더 많은 우리가 어떤 스타일을 추가할 수있는, 눈에 띄지 않을 것이 필수적이지만 이것이 나타나도록하십시오. 그 때 오류 메시지가 자사의 클래스에 싸여 오류가 우릴 위해 간단하게 이렇게 몇 가지 스타일 정보를 추가할 만들기라는 표시가 나타날 수있습니다
.error {
color: red;
font: 12pt verdana;
padding-left: 10px
}그리고 그게 전부 다 거기입니다. 다운로드 코드하려고 자신이 여기에
하지만, 편리한 물론 아직도 서버를 가지고 쪽 유효성 검사뿐만 아니라 필요합니다.