JQuery 양식 유효성 검사(validate):일반적인 예 소개
17513 단어 JQuery
jquery.validate.js는 jquery 산하의 검증 플러그인이다. jquery의 장점을 빌려 우리는 흔히 볼 수 있는 입력을 신속하게 검증할 수 있고 자신의 검증 방법을 확대할 수 있다.
예를 들어 다음과 같은 양식이 있습니다.
<form id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete formlegend>
<p>
<label for="firstname">Firstnamelabel>
<input id="firstname" name="firstname" class="required" />
p>
<p>
<label for="lastname">Lastnamelabel>
<input id="lastname" name="lastname" />
p>
<p>
<label for="username">Usernamelabel>
<input id="username" name="username" />
p>
<p>
<label for="password">Passwordlabel>
<input id="password" name="password" type="password" />
p>
<p>
<label for="confirm_password">Confirm passwordlabel>
<input id="confirm_password" name="confirm_password" type="password" />
p>
<p>
<label for="email">Emaillabel> <input id="email" name="email" />
p>
<p>
<input class="submit" type="submit" value="Submit" />
p>
fieldset>
form>이 표에는 이름, 성, 사용자 이름, 비밀번호, 비밀번호 확인, 이메일이 있습니다.그들은 모두 비어 있지 않으며, 전자메일은 정확한 형식의 주소, 비밀번호 확인, 비밀번호가 일치해야 한다.jQuery 검증을 사용하는 가장 간단한 방법은 jquery를 도입하는 것입니다.js 및 jquery validation.js 두 개의 js 파일.그리고 각각 input에class를 추가합니다:
validate가 자체로 가지고 있는 기본 검증을 다음과 같이 출력합니다
required: " ",
remote: " ",
email: " ",
url: " ",
date: " ",
dateISO: " (ISO).",
number: " ",
digits: " ",
creditcard: " ",
equalTo: " ",
accept: " ",
maxlength: jQuery.format(" {0} "),
minlength: jQuery.format(" {0} "),
rangelength: jQuery.format(" {0} {1} "),
range: jQuery.format(" {0} {1} "),
max: jQuery.format(" {0} "),
min: jQuery.format(" {0} ")그런 다음 document의 read 이벤트에 다음과 같은 메서드를 추가합니다.
<script>
$(document).ready(function(){
$("#signupForm").validate();
}
script>
이렇게 하면form이 제출될 때 input이 지정한class에 따라 검증됩니다.실패하면form의 제출이 막힙니다.그리고 힌트 정보를 input 뒤에 표시합니다.
그러나 이런 느낌은 좋지 않다. 왜냐하면 검증 규칙이 우리의 html 코드에 침입했기 때문이다.또 다른 방법은'rules'를 사용하는 것이다.우리는 input의 검증을class로 삭제할 것입니다.그런 다음 document의 ready 이벤트 응답 코드를 수정합니다.
$(document).ready(function() {
$("#signupForm").validate({
rules : {
firstname : "required",
lastname : "required",
username : "required",
password : "required",
confirm_password : {
required : true,
equalTo : "#password"
},
email : {
required : true,
email : true
}
}
});
})
이래도 같은 효과를 거둘 수 있다.그러면 다음 질문은 오류 알림이 기본값입니다.사용자 정의 프롬프트를 사용해야 합니다.
$(document).ready(function() {
$("#signupForm").validate({
rules : {
firstname : "required",
lastname : "required",
username : "required",
password : "required",
confirm_password : {
required : true,
equalTo : "#password"
},
email : {
required : true,
email : true
}
},
messages : {
firstname : " ",
lastname : " ",
username : " ",
password : " ",
confirm_password : {
required : " ",
equalTo : " "
},
email : {
required : " ",
email : " "
}
}
});
});오류 메시지에 빨간색 글꼴과 같은 특별한 스타일을 표시하려면 다음과 같이 추가할 수 있습니다.
<style type="text/css">
#signupForm label.error {
padding-left: 16px;
margin-left: 2px;
color:red;
background: url(img/unchecked.gif) no-repeat 0px 0px;
}
style>입력한 암호 길이에 대한 유효성 검사 규칙을 계속 추가하려면 다음과 같이 하십시오.
$(document).ready(function() {
$("#signupForm").validate({
rules : {
firstname : "required",
lastname : "required",
username : "required",
password : {
required : true,
minlength : 4,
maxlength : 15
},
confirm_password : {
required : true,
equalTo : "#password"
},
email : {
required : true,
email : true
}
},
messages : {
firstname : " ",
lastname : " ",
username : " ",
password : {
required : " ",
minlength : jQuery.format(" {0} "),
maxlength : jQuery.format(" {0} ")
},
confirm_password : {
required : " ",
equalTo : " "
},
email : {
required : " ",
email : " "
}
}
});
});remote 사용
이벤트를 통해 트리거 효과 방식을 지정할 수 있습니다. (선택할 수 있는 값은 키업 (버튼이 눌릴 때마다),blur (컨트롤러가 초점을 잃을 때), 지정하지 않을 때 제출 단추를 눌렀을 때만 트리거할 수 있습니다.)
$(document).ready(function() {
$("#signupForm").validate({
event : "keyup" || "blur"
})
});debug를true로 지정하면 폼이 제출되지 않고 검증에만 사용할 수 있습니다. (기본값은 제출) 디버깅에 사용할 수 있습니다.
$(document).ready(function() {
$("#signupForm").validate({
debug : true
})
});
제출하기 전에 사용자 정의 처리가 필요할 경우submitHandler 파라미터를 사용합니다
$(document).ready(function() {
$("#signupForm").validate({
SubmitHandler : function() {
alert("success");
}
})
});
감사합니다!http://blog.sina.com.cn/s/blog_4c736f7d0100gscm.html
좋은 웹페이지 즐겨찾기
