jquery verify.js 양식의 기본 사용법 시작하기 검증_jquery

선배님이 쓴 글을 제가 이해한 바에 따라 수정하고 기록용으로만 여기에 전재합니다.
먼저 국내 대기업 코드 게시 :

코드 복사 코드는 다음과 같습니다

javascript">
$( document).ready(function() {
$("#loginForm").validate({
규칙: {
u이메일: {
필수: true ,
이메일: true
},
uPassword: {
필수: true,
범위 길이: [6, 30]
}
},
메시지: {
u이메일: {
필수: lang('ls_input_myb'),
이메일: lang('ls_myb_email')
},
uPassword: {
필수: lang('ls_login_password' ),
범위 길이: $.format(lang('ls_password_length'))
}
},
errorPlacement: function(error, element) {
var 배치 = $(element.parent ("td").parent(" tr").next("tr").find("td").get(1))
placement.text(''); ( 배치 );
onkeyup: false
})
var accountTipsText = lang('ls_account_email')
$("#uEmail").focus(function() {
if (!$( $(this).parent().parent().next().find('td').get(1)).text()) {
$($ (this).parent().parent ().next().find('td').get(1)).html('' accountTipsText ' ');
$(this).css('color', '#000')
}).focus()
}); ;


사실 이 예제는 jquery.validate.js의 핵심을 거의 담고 있습니다.
선물 웹페이지의 온라인 시뮬레이션을 할 때 판단을 위해 코드를 직접 작성했던 기억이 나네요... 너무 순진했습니다...
다음은 기사의 전체 소개입니다.
기본 확인 규칙
(1)필수:true 필수 필드

(2)원격:"check.php" ajax 메서드를 사용하여 check.php를 호출하여 입력 값을 확인합니다
(3) email: true 이메일을 올바른 형식으로 입력해야 합니다
(4)url:true URL을 올바른 형식으로 입력해야 합니다
(5)date:true 날짜를 올바른 형식으로 입력해야 합니다
(6)dateISO:true 올바른 형식을 입력해야 합니다. 날짜(ISO) 형식을 입력해야 합니다. 예: 2009-06-23, 1998/01/22 유효성이 아닌 형식만 확인하세요.
(7)번호: true 유효한 숫자(음수, 소수)를 입력해야 합니다.
(8)digits:true 정수를 입력해야 합니다
(9)creditcard: 유효한 신용카드 번호를 입력해야 합니다
(10)equalTo:" #field" 입력 값은 #field와 동일해야 합니다
(11)accept: 유효한 접미사(업로드된 파일의 접미사)가 있는 문자열을 입력하세요.
(12)maxlength:5 최대 길이 5자(한자는 1자로 계산)
(13)minlength:10 최소 입력 길이는 10자 문자열(한자는 1자로 계산)
(14)rangelength:[5,10 ] 입력 길이는 5~10" 사이의 문자열이어야 합니다. (한자는 1자로 계산됩니다.)
(15) 범위:[5,10] 입력 값은 5~10 사이여야 합니다
(16) max:5 입력값은 5보다 클 수 없습니다.
(17)min:10 입력값은 10보다 작을 수 없습니다.
기본 팁




코드 복사

코드는 다음과 같습니다. messages: { required: "이 필드는 필수입니다.", remote: "이 필드를 수정하세요. .", email: "유효한 이메일 주소를 입력하세요.",

url: "유효한 URL을 입력하세요.",

date: "유효한 날짜를 입력하세요.",
dateISO : "유효한 날짜(ISO)를 입력하세요.",
dateDE: "Bitte geben Sie ein gumeltiges Datum ein.",
number : "유효한 숫자를 입력하세요.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "숫자만 입력하세요.",
creditcard: "유효한 신용카드 번호를 입력하세요.",
equalTo: "같은 값을 다시 입력하세요." ,
accept: "유효한 확장자와 함께 값을 입력하세요.",
maxlength: $.validator.format("{0}자 이하로 입력하세요."),
minlength: $. validator.format("최소 {0}자를 입력하세요."),
rangelength: $.validator.format("{0}에서 {1}자 사이의 값을 입력하세요."),
range: $.validator.format("{0}에서 {1} 사이의 값을 입력하세요."),
max: $.validator .format("{0}보다 작거나 같은 값을 입력하세요. "),
min: $.validator.format("{0} 이상의 값을 입력하세요.")
},


수정이 ​​필요한 경우 js 코드에 추가할 수 있습니다.

코드 복사 코드는 다음과 같습니다. 다음:

jQuery.extend(jQuery.validator.messages, {
required: "필수 필드",
remote: "이 필드를 수정하세요.",
email: " 올바른 이메일 형식을 입력하세요." ,
url: "법적 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}개로 입력하세요.")
});

권장 연습을 통해 이 파일을 message_cn.js에 넣고
페이지
1. 컨트롤에 확인 규칙을 작성합니다

코드를 복사합니다 코드는 다음과 같습니다.

> ;
$().ready(function() {
$("#signupForm").validate();
})

이름

E-Mail
for="password ">비밀번호
🎜>비밀번호 확인

class="{}"를 사용하려면 패키지를 가져와야 합니다: jquery.metadata.js
다음 방법을 사용하여 프롬프트 콘텐츠를 수정할 수 있습니다:
class="{required:true,minlength" :5,messages:{ 필수:'콘텐츠를 입력하세요'}}"

equalTo 키워드를 사용할 때 다음 코드와 같이 다음 콘텐츠를 따옴표로 묶어야 합니다.
class="{required :true,minlength:5,equalTo:'# 비밀번호'}"
또 다른 방법은 키워드: 메타를 사용하는 것입니다(다른 플러그인을 사용하는 메타데이터의 경우 자체 프로젝트에서 유효성 검사 규칙을 래핑해야 하며 이 특수 옵션을 사용할 수 있습니다).
검증 규칙에 대한 메타데이터의 검증 속성 내부를 찾도록 검증 플러그인에 지시합니다.
예:
meta: "validate"

다른 방법이 있습니다:
$.metadata.setType("attr", "validate") ;
이 방법으로 유효성 검사 ="{required:true}" 또는 class="required"를 사용할 수 있지만 class="{required:true,minlength:5}"는 작동하지 않습니다
2. 확인 규칙을 코드에




코드 복사

코드는 다음과 같습니다.

$().ready(function() {
$("#signupForm").validate({
규칙: {
이름: "필수",
이메일: {
필수: true,
이메일: true
},
비밀번호: {
필수: true,
최소 길이: 5
},
confirm_password: {
필수: true,
최소 길이: 5,
equalTo: "#password"
}
},
messages: {
firstname: "이름을 입력하세요",
email: {
필수: "이메일 주소를 입력하세요.",
email: "올바른 이메일 주소를 입력하세요."
},
password: {
필수: "입력하세요. 비밀번호" ,
minlength: jQuery.format("비밀번호는 {0}자 이상이어야 합니다.")
},
confirm_password: {
required: "확인 비밀번호를 입력하세요.",
minlength: " 비밀번호는 5자 미만일 수 없습니다.",
equalTo: "두 번 입력한 비밀번호가 일치하지 않습니다."
}
}
})
}); 🎜>//messages, 컨트롤에 메시지가 없으면 기본 메시지는

이름 label>

E-Mail

비밀번호

비밀번호 확인

< ;input class="submit" type="submit" value="Submit"/>

필수:true에는 값이 있어야 합니다.
required:"# aa:checked" 표현식의 값이 true인 경우
required:function(){}이 true를 반환하는지 확인해야 합니다. 후자의 두 가지 유형은 양식을 만들 때 확인해야 합니다.
요소는 동시에 양식을 작성하거나 작성하지 않는 데 자주 사용됩니다. 요소
주의해야 할 일반적인 방법 및 문제
1. 기본 SUBMIT

을 대체하려면 다른 방법을 사용하세요.

코드 복사 코드는 다음과 같습니다.

$().ready(function() {
$( "#signupForm").validate({
submitHandler:function(form){
alert("submitted ");
form.submit();
}
}); >});


다음과 같이 작성하여 유효성 검사의 기본값을 설정할 수 있습니다.

$.validator.setDefaults({
submitHandler: function(form) { Alert("submitted !");form.submit(); }
});
양식을 제출하려면 $(form).submit() 대신 form.submit()을 사용해야 합니다.
2.debug. 이 매개변수가 true이면 양식이 제출되지 않고 확인만 됩니다. 이는 디버깅에 매우 편리합니다.
$().ready( function() {
$("#signupForm") .validate({
debug:true
});
});
한 페이지에 여러 양식이 있는 경우
$.validator.setDefaults({
debug: true
})
3.ignore: 특정 요소를 무시하고 유효성을 검사하지 않음
ignore: ".ignore"
4.errorPlacement: 콜백 기본값: 확인된 요소 뒤에 오류 메시지 넣기
오류 위치를 나타냅니다. 기본값은 error.appendTo(element.parent())입니다. 즉, 확인된 요소 뒤에 오류 메시지를 넣습니다.

복사 코드 코드는 다음과 같습니다.

errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
//示例：

이름






14/02/07



02/14/07




 

이용약관을 읽었으며 이에 동의합니다.

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显示在内容的后face
errorClass：String 기본값: "error"
指定错误提示的css类name, 可以自定义错误提示的样式
오류요소 ：문자열 기본값: "label"
사용什么标签标记错误，默认的是label你可以改成em
errorContainer：Selector
显示或者隐藏验证信息，可以自动实现有错误信息流现时把容器属性变为显示，无错误时隐藏，用处不大
errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer：Selector
把错误信息统一放在一个容器里面。
래퍼:문자열
사용하는 동안 오류가 발생하는 오류가 발생합니다.
같은 종류의 오류가 발생하는 경우
并且没有信息时自动隐藏
errorContainer: "div. error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"
设置错误提示的样式，可以增加图标显示
input.error { border: 1px 단색 빨간색; }
label.error {
background:url("./demo/images/unchecked.gif") 반복 없음 0px 0px;
왼쪽 여백: 16px;
패딩 하단: 2px;
글꼴 두께: 굵게;
색상: #EA5200;
}
label.checked {
background:url("./demo/images/checked.gif") 반복 없음 0px 0px;
}
성공：문자열,콜백
要验证的元素过验证后的动작품，如果跟一个字符串，会当做一个css类，也可跟一个函数
성공: 함수(레이블 ) {
//   IE용 텍스트로 설정
label.html(" ").addClass("checked");
//label.addClass("valid").text("확인!")
}
添加"valid" 到验证元素, 在CSS中定义的样式
성공: "유효"
nsubmit: 부울 기본값: true
提交时验证. 设置唯false就用其他方法去验证
onfocusout：Boolean 기본값: true
失去焦点是验证(不包括checkboxes/radiobuttons)
onkeyup：Boolean 기본값: true
inkeyup时验예.
onclick：부울 기본값: true
checkboxes 와 radio 点击时验证
focusInvalid：부울 기본값: true
提交表单后，未通过验证的表单(第一个或提交の前获得焦点의未通过验证的表单)会获得焦点
focusCleanup：Boolean 기본값: false
如果是true那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用

复aze代码

代码如下:

// 重置表单
$().ready(function() {
var 유효성 검사기 = $("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit();
}
});
$("#reset").click(function() {
validator.resetForm();
});

remote: URL
확인을 위해 ajax를 사용하세요. 기본적으로 현재 확인된 값이 원격 주소로 제출됩니다. 다른 값을 제출해야 하는 경우 데이터 옵션

을 사용할 수 있습니다. 🎜>코드 복사 코드는 다음과 같습니다.

remote: "check-email.php"
remote: {
url: "check-email.php", //백그라운드 처리 프로그램
type: "post", //데이터 전송 방법
dataType: "json", //데이터 형식 허용
data: { //전송할 데이터
username: function() {
return $("#username").val()
}
}
}

원격 주소는 "true" 또는 "false"로만 출력할 수 있으며, 그 외 다른 출력은 허용되지 않습니다
addMethod: 이름, 메서드, 메시지
사용자 지정 유효성 검사 방법
// 한자 2바이트
jQuery.validator.addMethod("byteRangeLength ", function(value, element, param) {
var length = value.length;
for(var i = 0; i if(value.charCodeAt( i) > 127){
length ;
}
}
return this.ional(element) || ( length >= param[0] && length }, $.validator.format("입력한 값이 {0}~{1}바이트(한자 1문자는 2바이트로 계산)인지 확인하세요.") );
/ / 우편번호 확인
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.ional (element) || (tel.test(value));
}, "우편번호를 정확하게 입력해주세요")
라디오 확인, 체크박스 선택
라디오 필수는 라디오를 선택해야 함을 의미합니다.

체크박스에 필수라는 것은 반드시 선택해야 한다는 뜻입니다

체크박스의 minlength는 선택해야 하는 최소 개수를 나타내고, maxlength는 최대 선택 개수를 나타냅니다. rangelength:[2,3]은 선택 항목 수의 범위를 나타냅니다

코드 복사 코드는 다음과 같습니다.

select에 필수는 선택한 값이 비어 있을 수 없음을 의미합니다.

코드 복사 코드는 다음과 같습니다.

Buga> ;
Baga
< ;option value="3">Oi
items, rangelength:[2,3]은 선택한 숫자 범위를 나타냅니다.

코드 복사

코드는 다음과 같습니다.

🎜>바나나 사과 복숭아

Turtle

글의 레이아웃이 좀 지저분합니다. 자신의 기록~~