jQuery Validate W3C 콘텐츠
17162 단어 jQuery Validate
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
기본 검사 규칙
번호
규칙.
묘사
1
required:true
입력해야 하는 필드입니다.
2
remote:"check.php"
aax 방법으로 check를 호출합니다.php에서 입력값을 검증합니다.
3
email:true
올바른 형식의 e-메일을 입력해야 합니다.
4
url:true
올바른 형식의 웹 주소를 입력해야 합니다.
5
date:true
정확한 형식의 날짜를 입력해야 합니다.날짜 검사 i6 오류가 발생했습니다. 주의하십시오.
6
dateISO:true
올바른 형식의 날짜(ISO)를 입력해야 합니다(예: 2009-06-231998/01/22).형식만 검증하고 유효성은 검증하지 않습니다.
7
number:true
올바른 숫자(음수, 소수)를 입력해야 합니다.
8
digits:true
정수를 입력해야 합니다.
9
creditcard:
반드시 합법적인 신용카드 번호를 입력해야 한다.
10
equalTo:"#field"
입력한 값은 #field와 같아야 합니다.
11
accept:
올바른 접미사 이름을 가진 문자열(업로드 파일의 접미사)을 입력합니다.
12
maxlength:5
최대 5자 길이의 문자열을 입력하십시오.
13
minlength:10
입력 길이가 최소한 10인 문자열.
14
rangelength:[5,10]
5와 10 사이의 문자열을 입력해야 합니다. (한자는 문자로 계산됩니다.)
15
range:[5,10]
5에서 10 사이의 값을 입력해야 합니다.
16
max:5
입력 값은 5보다 클 수 없습니다.
17
min:10
입력 값은 10보다 작으면 안 됩니다.
기본 프롬프트
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein gültiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
},
수정이 필요한 경우 js 코드에 다음을 추가할 수 있습니다.
jQuery.extend(jQuery.validator.messages, {
required: " ",
remote: " ",
email: " ",
url: " ",
date: " ",
dateISO: " (ISO).",
number: " ",
digits: " ",
creditcard: " ",
equalTo: " ",
accept: " ",
maxlength: jQuery.validator.format(" {0} "),
minlength: jQuery.validator.format(" {0} "),
rangelength: jQuery.validator.format(" {0} {1} "),
range: jQuery.validator.format(" {0} {1} "),
max: jQuery.validator.format(" {0} "),
min: jQuery.validator.format(" {0} ")
});
이 파일을 메시지에 넣는 방법을 추천합니다.cn.js에서 페이지에 가져오기:
<script src="../js/messages_cn.js" type="text/javascript"></script>
사용 방법
1. 검사 규칙을 컨트롤에 쓰기
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="../js/jquery.metadata.js" type="text/javascript"></script>
$().ready(function() {
$("#signupForm").validate();
});
<form id="signupForm" method="get" action="">
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" class="required" />
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email" class="required email" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" class="{required:true,minlength:5}" />
</p>
<p>
<label for="confirm_password"> </label>
<input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
class="{}"을 사용하는 방식으로 패키지를 도입해야 합니다: jquery.metadata.js.
다음과 같은 방법으로 프롬프트 내용을 수정할 수 있습니다.
class="{required:true,minlength:5,messages:{required:' '}}"equalTo 키워드를 사용할 때는 다음 코드와 같이 따옴표를 붙여야 합니다.
class="{required:true,minlength:5,equalTo:'#password'}"2. 검사 규칙을 js 코드에 쓰기
$().ready(function() {
$("#signupForm").validate({
rules: {
firstname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
firstname: " ",
email: {
required: " Email ",
email: " email "
},
password: {
required: " ",
minlength: jQuery.format(" {0} ")
},
confirm_password: {
required: " ",
minlength: " 5 ",
equalTo: " "
}
}
});
});
메시지에서 컨트롤에 메시지가 없으면 기본 정보를 호출합니다
<form id="signupForm" method="get" action="">
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password"> </label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
required:true는 값이 있어야 합니다.required: "#aa:checked"표현식의 값이 진짜라면 검증이 필요합니다.required:function () {} 은 검증이 필요하다는 뜻으로 되돌아옵니다.
뒤에 있는 두 가지는 표에 동시에 기입하거나 기입하지 않는 요소가 필요합니다.
상용 방법 및 주의 문제
1. 기본 SUBMIT를 다른 방식으로 대체
$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit();
}
});
});
aax 방식 사용하기
$(".selector").validate({
submitHandler: function(form)
{
$(form).ajaxSubmit();
}
})
validate의 기본값을 다음과 같이 설정할 수 있습니다.
$.validator.setDefaults({
submitHandler: function(form) { alert("submitted!");form.submit(); }
});
폼을 제출하려면form을 사용해야 합니다.submit (), $(form) 을 사용하지 마십시오.submit().
2. debug, 폼만 검증하고 제출하지 않음
만약 이 매개 변수가true라면, 폼은 제출하지 않고, 검사만 하고, 디버깅을 할 때 매우 편리합니다.
$().ready(function() {
$("#signupForm").validate({
debug:true
});
});
한 페이지에서 여러 양식을 debug로 설정하려면 다음을 사용합니다.
$.validator.setDefaults({
debug: true
})
3. ignore: 일부 요소를 무시하고 검증하지 않음
ignore: ".ignore"
4, 오류 정보 표시 위치 변경
errorPlacement：Callback
오류가 놓인 위치를 표시합니다. 기본값은: error입니다.appendTo(element.parent());즉 오류 정보를 검증된 요소 뒤에 두는 것이다.
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
인스턴스
<tr>
<td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
<td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
<td class="status"></td>
</tr>
<tr>
<td style="padding-right: 5px;">
<input id="dateformat_eu" name="dateformat" type="radio" value="0" />
<label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
</td>
<td style="padding-left: 5px;">
<input id="dateformat_am" name="dateformat" type="radio" value="1" />
<label id="ldateformat_am" for="dateformat_am">02/14/07</label>
</td>
<td></td>
</tr>
<tr>
<td class="label"> </td>
<td class="field" colspan="2">
<div id="termswrap">
<input id="terms" type="checkbox" name="terms" />
<label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
</div>
</td>
</tr>
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo( element.parent().next().next() );
else if ( element.is(":checkbox") )
error.appendTo ( element.next() );
else
error.appendTo( element.parent().next() );
}
코드의 역할은: 일반적인 경우 오류 정보를 에 표시하고,radio라면 에 표시하며,checkbox라면 내용의 뒤에 표시합니다.
매개 변수
타입
묘사
기본값
errorClass
String
오류 알림의 css 클래스 이름을 지정합니다. 오류 알림의 스타일을 사용자 정의할 수 있습니다.
"error"
errorElement
String
어떤 탭으로 오류를 표시합니까? 기본값은 label입니다. em으로 바꿀 수 있습니다.
"label"
errorContainer
Selector
검증 정보를 표시하거나 숨기면 오류 정보가 나타날 때 용기 속성을 표시하고 오류가 없을 때 숨기는 것을 자동으로 실현할 수 있어 쓸모가 없다.errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer
Selector
잘못된 정보를 한 용기에 통일적으로 넣다.
wrapper
String
어떤 라벨로 위에 있는 errorElement을 다시 싸세요.
일반적으로 이 세 가지 속성을 동시에 사용하면 한 용기에 모든 오류 알림을 표시하고 정보가 없을 때 자동으로 숨긴다.
errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"
5, 오류 정보 표시 스타일 변경
오류 알림의 스타일을 설정하면 아이콘 표시를 추가할 수 있습니다. 이 시스템에validation이 설치되어 있습니다.css, 검사 파일의 스타일을 유지하는 데 사용됩니다.
input.error { border: 1px solid red; }
label.error {
background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
label.checked {
background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}
6, 각 필드 검증 통과 함수
success：String,Callback검증할 요소가 검증된 동작을 통해 문자열과 같으면 css 클래스로 간주되고 함수와 같을 수도 있습니다.
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
//label.addClass("valid").text("Ok!")
}
CSS에서 정의한 스타일 .
success: "valid"
7. 검증의 트리거 방식 수정
다음은 boolean형이지만,false로 바꾸지 않으면 함부로 추가하지 않는 것을 권장합니다.
트리거 모드
타입
묘사
기본값
onsubmit
Boolean
제출 시 확인합니다.false로 설정하면 다른 방법으로 검증합니다.
true
onfocusout
Boolean
초점을 잃었을 때 검증합니다. (복선상자/라디오 단추는 포함되지 않습니다.)
true
onkeyup
Boolean
keyup 에서 확인합니다.
true
onclick
Boolean
체크 상자와 라디오 단추를 눌렀을 때 검증합니다.
true
focusInvalid
Boolean
폼을 제출하면 검증되지 않은 폼(첫 번째 또는 제출하기 전에 초점을 얻은 검증되지 않은 폼)이 초점을 얻는다.
true
focusCleanup
Boolean
true라면 검증되지 않은 요소가 초점을 얻었을 때 오류 알림을 제거합니다.focusInvalid와 함께 사용하지 마십시오.
false
//
$().ready(function() {
var validator = $("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit();
}
});
$("#reset").click(function() {
validator.resetForm();
});
});
8. 비동기식 검증
remote：URLaax 방식으로 검증을 진행하면 현재 검증된 값을 원격 주소로 기본적으로 제출합니다. 다른 값을 제출할 필요가 있으면 데이터 옵션을 사용할 수 있습니다.
remote: "check-email.php"remote: {
url: "check-email.php", //
type: "post", //
dataType: "json", //
data: { //
username: function() {
return $("#username").val();
}
}
}
원격 주소는 "true"또는 "false"만 출력할 수 있고 다른 출력은 출력할 수 없습니다.
9. 사용자 정의 검사 추가
addMethod：name, method, message사용자 정의 검증 방법
//
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.length;
for(var i = 0; i < value.length; i++){
if(value.charCodeAt(i) > 127){
length++;
}
}
return this.optional(element) || ( length >= param[0] && length <= param[1] );
}, $.validator.format(" {0}-{1} ( 2 )"));
//
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, " ");
주의: additional-methods.js 파일에 jquery를 추가하거나 추가합니다.validate.js 파일에 추가됩니다.일반적으로 additional-methods에 쓰는 것을 권장합니다.js 파일에서
참고: 메시지에서cn.js 파일에 추가: isZipCode: "중국어, 영문자, 숫자, 밑줄만 포함할 수 있습니다."호출하기 전에 additional-methods를 추가합니다.js 파일의 인용입니다.
10. 라디오와 체크박스, select의 검증
라디오의 Required는 하나를 선택해야 한다는 것을 표시합니다.
<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
<input type="radio" id="gender_female" value="f" name="gender"/>
checkbox의 Required는 반드시 선택해야 한다는 것을 표시합니다.
<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />
checkbox의minlength는 선택해야 할 최소 개수를 표시하고maxlength는 최대 선택 개수를 표시하며rangelength:[2,3]는 선택한 개수 구간을 표시합니다.
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
select의 Required는 선택된value가 비어 있을 수 없음을 표시합니다.
<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
<option value=""></option>
<option value="1">Buga</option>
<option value="2">Baga</option>
<option value="3">Oi</option>
</select>
select의minlength는 선택한 최소 개수(다중 선택 가능한select)를 표시하고maxlength는 가장 큰 선택 개수를 표시하며rangelength:[2,3]는 선택한 개수 구간을 표시합니다.
<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
<option value="b">Banana</option>
<option value="a">Apple</option>
<option value="p">Peach</option>
<option value="t">Turtle</option>
</select>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery Validate input은 동적으로 변경됩니다.양식 유효성 검사 input이 동적 변화일 때class='required'같은 방식을 사용할 수 있지만 메시지는 영문입니다. 메시지의 내용을 변경하려면 js 코드에 다음과 같이 추가할 수 있습니다. 이 파일을 메시지...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
