jQuery 유효성 검사 플러그인_jquery를 사용하여 Ajax 유효성 검사 복제를 구현하는 2가지 방법
- WBOY원래의
- 2016-05-16 15:18:541849검색
이 기사의 예에서는 Ajax 검증 복제를 구현하기 위한 jQuery 검증 플러그인의 두 가지 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
jquery verify는 수년간의 개선 끝에 완벽해졌습니다. 검증 요구 사항의 80%를 충족할 수 있습니다. 내장된 유효성 검사 기능이 요구 사항을 충족하지 못하는 경우 기능을 확장하기 위한 addMethod를 제공합니다. addMethod의 사용법을 설명하기 위해 작은 예를 들어 보겠습니다.
전체 데모 예제 코드는 다음과 같습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>jquery validate ajax check exist</title>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
jQuery.validator.addMethod("phonecheck", function(value, element) {
string = value.match(/0(\d{2,2})-(\d{7,7})/ig);
if(string != null){
return true;
}else{
return false;
}
}, "telphone number like 021-1234567");
jQuery.validator.addMethod("phonesame", function(value, element) {
var flag = 1;
$.ajax({
type:"POST",
url:'tel.php',
async:false,
data:{'tel':value},
success: function(msg){
if(msg == 'yes'){
flag = 0;
}
}
});
if(flag == 0){
return false;
}else{
return true;
}
}, "sorry number have been exist");
$("#myform").validate({
errorPlacement: function(error, element) {
error.insertAfter(element);
},
rules:{
username:{
required:true,
remote:{
url:"tel.php",
type:"post",
dataType:"html",
data:{
username:function(){return $("#username").val();}
},
dataFilter: function(data, type) {
if (data == "yes")
return true;
else
return false;
}
}
},
telphone:{
required:true,
rangelength:[11,11],
phonecheck:true,
phonesame:true
}
},
messages:{
telphone:{
required:"Please enter your phone",
rangelength:"phone must be 11 numbers"
},
username:{
required:"Please enter your username",
remote:"the username have been exist"
}
},
debug:true
})
});
</script>
</head>
<body style="margin-left:500px;margin-top:100px;">
<div style="font-size:24px;">021-1234567 or tank exist</div><br>
<form id="myform" method="post">
<label>Your telphone</label>
<input name="telphone" class="required" value="" /><br><br>
<label>Your username</label>
<input name="username" id="username" class="required" value="" />
<br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
여기서 jquery verify를 사용하는 것이 익숙해지면 매우 편리합니다.
jQuery 플러그인과 관련된 더 많은 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제인 "일반적인 jQuery 플러그인 및 사용법 요약"
을 확인할 수 있습니다.이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.