jQuery를 검증

(이 튜토리얼의 CDN을 사용) 가져 오기 JS 라이브러리

<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

기본 유효성 검사 규칙

기본 팁

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 ).",
	number: "Please enter a valid number.",
	digits: "Please enter only digits.",
	creditcard: "Please enter a valid credit card number.",
	equalTo: "Please enter the same value again.",
	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}." )
}

jQuery를 검증은, 조언을 다운로드 패키지 DIST / 현지화 / messages_zh.js에있는 중국어 정보 패킷을 제공합니다 다음과 같이 읽습니다 :

(function( factory ) {
	if ( typeof define === "function" && define.amd ) {
		define( ["jquery", "../jquery.validate"], factory );
	} else {
		factory( jQuery );
	}
}(function( $ ) {

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhongwén), 汉语, 漢語)
 */
$.extend($.validator.messages, {
	required: "这是必填字段",
	remote: "请修正此字段",
	email: "请输入有效的电子邮件地址",
	url: "请输入有效的网址",
	date: "请输入有效的日期",
	dateISO: "请输入有效的日期 (YYYY-MM-DD)",
	number: "请输入有效的数字",
	digits: "只能输入数字",
	creditcard: "请输入有效的信用卡号码",
	equalTo: "你的输入不相同",
	extension: "请输入有效的后缀",
	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} 的数值")
});

}));

당신은 페이지에 소개 된 정보 파일 DIST / 현지화 / messages_zh.js을 지역화 할 수 있습니다 :

<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

용도

1, 유효성 검사 규칙을 작성 제어

<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>输入您的名字，邮箱，URL，备注。</legend>
    <p>
      <label for="cname">Name (必需, 最小两个字母)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (必需)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (可选)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">备注 (必需)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>

»시도

2, 유효성 검사 규칙 작성 JS 코드

$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
      agree: "请接受我们的声明",
      topic: "请选择两个主题"
    }
});

제어의 메시지에는 메시지가없는 경우, 기본 정보를 사용

<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="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>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">请同意我们的声明</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">我乐意接收新信息</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester
      </label>
      <label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>

»시도

필요 : 진정한 가치는 필수입니다.
필요한 : "#AA : 선택은"사실의 표현이다, 당신은 확인해야합니다.
필수 : 함수 () {} true를 돌려, 검증의 필요성을 표명했다.

일반적으로 형태로, 뒷면에 사용 된 두 채우거나 요소를 채울 필요가있다.

문제에 대한 일반적인 방법 및주의

1, 그렇지 않으면 기본이 제출 교체

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("提交事件!");   
            form.submit();
        }    
    });
});

아약스를 사용하는 방법

 $(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 }) 

다음과 같이 기본값이 말로 유효성을 검사 설정할 수 있습니다 :

$.validator.setDefaults({
  submitHandler: function(form) { alert("提交事件!");form.submit(); }
});

당신이 양식을 제출하려면, 대신 $ (양식) .submit ()의) form.submit를 (사용해야합니다.

2, 디버그, 검증은 양식을 제출하지 않습니다

이 매개 변수가 true의 경우, 다음 양식이 제출되지 만 검사를 디버깅 할 때 매우 편리하다, 수행.

$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});

페이지가 여러 형태의 디버그 설정하려는 경우, 사용

$.validator.setDefaults({
   debug: true
})

3, 무시 : 특정 요소를 무시 확인되지 않습니다

ignore: ".ignore"

4. 표시되는 오류 메시지의 위치를 ​​변경

errorPlacement：Callback

잘못의 위치를 ​​표시, 기본은 다음과 같습니다 error.appendTo (element.parent ()), 즉 인증 요소 뒤에 잘못된 메시지입니다.

errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}

예

<p>将错误信息放在 label 元素后并使用 span 元素包裹它</p>

<form method="get" class="cmxform" id="form1" action="">
  <fieldset>
    <legend>Login Form</legend>
    <p>
      <label for="user">Username</label>
      <input id="user" name="user" required minlength="3">
    </p>
    <p>
      <label for="password">Password</label>
      <input id="password" type="password" maxlength="12" name="password" required minlength="5">
    </p>
    <p>
      <input class="submit" type="submit" value="Login">
    </p>
  </fieldset>
</form>

»시도

코드의 역할은 다음과 같습니다 정상적인 상황에서 오류 메시지가 표시됩니다 <TD 클래스 = "상태"> </ TD> 라디오가 표시되면 <TD> </ TD>, 체크 박스는의 내용에 표시되어있는 경우 뒤에.

보통 동시에 세 가지 특성을, 용기에 표시 모든 오차 함수를 달성하기 위해, 어떤 정보가 자동으로 숨겨 없다.

errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"

도 5에 표시되는 에러 메시지의 스타일을 변경

스타일의 오류를 설정하면 시스템이 검증 문서의 스타일을 유지하기 위해 설계된 validation.css를 설립했다, 아이콘이 표시됩니다 증가시킬 수있다.

input.error {국경 : 1 픽셀 고체 빨간}
label.error {
  배경 : 홈페이지 ( "unchecked.gif ./ 데모 / 이미지 /") 노 반복 0 픽셀의 0 픽셀;

  패딩 왼쪽 : 16px;

  패딩 바닥 : 2 픽셀;

  글꼴 - 무게 : 굵게;

  색상 : #의 EA5200;
}
label.checked {
  배경 : 홈페이지 ( "./ 데모 / 이미지 / checked.gif") 노 반복 0 픽셀의 0 픽셀;
}

6 각 필드는 기능을 수행하여 검증

 성공 : 문자열, 콜백 

확인하려면 그뿐만 아니라 기능, CSS 클래스로 처리됩니다 문자열 다음에 경우 확인 후 동작에 의해 요소.

성공 : 기능 (라벨) {
    // 설정 & NBSP; IE에 대한 텍스트로
    label.html ( "& NBSP;"). addClass는 ( "확인");
    //label.addClass("valid").text("Ok! ")
}

<스타일> label.valid {} </ 스타일> CSS 스타일에 정의 된 요소를 확인하기 위해 "유효"추가합니다.

성공 : "유효"

7 트리거 유효성을 수정할

다음은 부울이지만 false로 원하지 않는다면,하지만 권장, 그렇지 않으면 동결했다.

//) (양식 $를 재설정합니다. 준비 (함수 () {
 var에 검증 = $ ( "#의 signupForm"). 검증 ({
        submitHandler : 기능 (양식) {
            경고 ( "제출");   
            form.submit ();
        }    
    });
    $ ( "# 재설정"). () {(기능을 클릭
        validator.resetForm ();
    });

});

8, 비동기 확인

 원격 : URL 

다른 값을 제출해야하는 경우 원격 주소 확인에 현재의 디폴트 값에 제출 아약스를 사용하여 인증하는 방법은, 당신은 데이터 옵션을 사용할 수 있습니다.

 원격 : "체크 email.php를" 

원격 : {
    URL : // 스풀러 유형 "-email.php 확인": "게시물", // 데이터 전송 모드 데이터 형식 : "json으로", // 데이터 형식의 데이터를 수신 : {전달되는 사용자 이름 // 데이터 : 기능 ( ) {
            $를 반환 ( "# 사용자 이름") 발 ();
        }
    }
}

원격 주소는 출력이 "true"또는 "false"는, 다른 출력을 가질 수 없습니다.

9 추가 지정 유효성 검사

 addMethod : 이름, 방법, 메시지 

사용자 인증 방법

// 문자를 두 바이트 jQuery.validator.addMethod ( "byteRangeLength", 기능 (값, 요소, PARAM) {
    var에 길이 = value.length;
    대한 (var에 나는 = 0; i가 value.length을 <; 내가 ++) {
        경우 (value.charCodeAt (I)> 127) {
            길이 ++;
        }
    }
  || this.optional (요소)을 반환 (길이> = PARAM [0] && 길이 <= PARAM [1]);   
} $의 .validator.format는 ( "값이 입력되었는지 확인 {0} - {1} 바이트 (1 바이트 문자를 2 카운트) 사이"));

// 우편 번호 확인 jQuery.validator.addMethod ( "isZipCode", 기능 (값, 요소) {   
    var에 전화 = / ^ [0-9] {6} $ /;
    || this.optional (요소)을 반환 (tel.test (값));
}) "올바른 우편 번호를 입력하세요";

주 : 추가-methods.js 파일을 추가하거나 jquery.validate.js 파일을 추가하려면.권장 사항은 일반적으로 추가-methods.js 파일에 기록.

참고 : messages_cn.js 파일을 추가합니다 isZipCode를 : "텍스트, 문자, 숫자 및 밑줄을 포함 할 수 있습니다."추가-methods.js 파일 참조를 추가하려면 호출하기 전에.

10, 라디오, 체크 박스, 확인을 선택

라디오는 필수 표현을 선택해야합니다.

<입력 유형 = "라디오"ID = "gender_male"값 = "m"이름 = "성"필요 />
<입력 유형 = "라디오"ID = "gender_female"값 = "F"이름 = "성"/>

체크 박스는 필요한 표현을 선택해야합니다.

<입력 유형 = "체크 박스"클래스 = "체크 박스"ID = "동의"이름 = 필요 "동의합니다"/>

검사해야 MINLENGTH 체크 박스의 최소 수, 최대 길이가 선택 rangelength의 최대 수를 나타내고 : [2,3]는 선택된 범위의 숫자를 나타낸다.

<입력 유형 = "체크 박스"클래스 = "체크 박스"ID = "spam_email"값 = "이메일"이름 = "스팸 []"필요한 MINLENGTH = "2"/>
<입력 유형 = "체크 박스"클래스 = "체크 박스"ID = "spam_phone"값 = "전화"이름 = "스팸 []"/>
<입력 유형 = "체크 박스"클래스 = "체크 박스"ID = "spam_mail"값 = "메일"이름 = "스팸 []"/>

빈 수 없습니다 선택한 값을 보여주는 필요를 선택합니다.

<선택 한 id = "정글"이름 = "정글"제목 = "이 무엇인가를 선택하세요!"필수>
    <옵션 값 = ""> </ 옵션>
    <옵션 값 = "1"> BUGA </ 옵션>
    <옵션 값 = "2"> 바가 </ 옵션>
    <옵션 값 = "3"> 오이 </ 옵션>
</ 선택>

선택된 표현 MINLENGTH 최소 수 (선택한 여러 선택)를 선택 최대 길이가 선택 rangelength의 최대 값을 나타낸다 : [2,3] 선택한 구간의 번호를 나타낸다.

<선택 한 id = "과일"이름 = "과일"제목 = 클래스 = "적어도 두 개의 과일을 선택하세요", "{필요 : 사실, MINLENGTH : 2}"여러 = ​​"복수"를>
    <옵션 값 = "B"> 바나나 </ 옵션>
    <옵션 값 = "A"> 애플 </ 옵션>
    <옵션 값 = "P"> 복숭아 </ 옵션>
    <옵션 값 = "t"> 거북이 </ 옵션>
</ 선택>

jQuery.validate 중국어 API

검사기

방법은 검사기 개체를 반환 확인합니다. 검사기 개체가 많은 방법 양식의 내용을 교정 절차를 트리거하거나 변경하는 데 사용할 수 있습니다, 몇 가지 일반적으로 사용되는 방법은 다음과 같습니다.

내장 인증

선택 사항) (검증

$(".selector").validate
({
	debug:true
})

$.validator.setDefaults({
	debug:true
})

$(".selector").validate({
	submitHandler:function(form) {
		$(form).ajaxSubmit();
	}
})

$("#myform").validate({
	ignore:".ignore"
})

$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	}
})

$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	},
	messages:{
		name:"Name不能为空",
		email:{       
			required:"E-mail不能为空",
			email:"E-mail地址不正确"
		}
	}
})

$("#myform").validate({
	groups:{
		username:"fname 
		lname"
	},
	errorPlacement:function(error,element) {
		if (element.attr("name") == "fname" || element.attr("name") == "lname")   
			error.insertAfter("#lastname");
		else    
			error.insertAfter(element);
	},
   debug:true
})

$(".selector").validate({  
	onsubmit:false
})

$(".selector").validate({   
	onfocusout:false
})

$(".selector").validate({
   onkeyup:false
})

$(".selector").validate({
   onclick:false
})

$(".selector").validate({
   focusInvalid:false
})

$(".selector").validate({
   focusCleanup:true
})

$(".selector").validate({ 
	errorClass:"invalid"
})

$(".selector").validate
   errorElement:"em"
})

$(".selector").validate({
   wrapper:"li"
})

$("#myform").validate({   
	errorLabelContainer:"#messageBox",
	wrapper:"li",
	submitHandler:function() { 
		alert("Submitted!") 
	}
})

$(".selector").validate({  
	showErrors:function(errorMap,errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
		this.defaultShowErrors();
	}
})

$("#myform").validate({  
	errorPlacement:function(error,element) {  
		error.appendTo(element.parent("td").next("td"));
   },
   debug:true
})

$("#myform").validate({        
	success:"valid",
        submitHandler:function() { 
			alert("Submitted!") 
		}
})

addMethod (이름, 방법, 메시지) 방법

매개 변수 이름은 add 메소드의 이름입니다.

매개 변수 방법은 세 개의 매개 변수 (값, 요소, PARAM)를받는 함수이다.
값은 엘리먼트 값이며, 소자는 소자 자체, PARAM 파라미터이다.

우리는 기본 인증 방법의 검증 방법을 제외하고 추가 addMethod를 사용할 수 있습니다. 예를 들어, 단 문자를 잃고, 범위는 다음과 같이 작성 AF이며, 필드있다 :

$ .validator.addMethod ( "AF"기능 (값, 요소, PARAMS) {  
	경우 (value.length> 1) {
		false를 반환;
	}
    경우 (값> =의 PARAMS [0] && 값 <=의 PARAMS [1]) {
		true를 반환;
	} 그밖에 {
		false를 반환;
	}
}) "편지 및 AF이어야합니다";

규칙 작성 양식 필드 ID = "사용자 이름"가있는 경우 :

이름 : {
   AF : "A", "F"]
}

AddMethod 첫번째 파라미터는 AF이며, 추가 인증 방법의 이름이다.
여기에 제안 addMethod 세 번째 매개 변수, 사용자 지정 오류 메시지가 있습니다 : "편지, 그리고 AF해야합니다."
addMethod 두 번째 매개 변수는이 더 중요하다, 함수, 결정의 표현은 검증이 방법을 사용합니다.

하나 이상의 매개 변수를 쉼표로 구분하여, []에 기록되어있는 경우 "A", 다음이, 고유 매개 변수 : 하나의 매개 변수 경우, 이러한 AF로 직접 작성합니다.

메타 문자열 모드

$ ( "#의 MYFORM"). 유효성 검사 ({

   메타 : "확인"

   submitHandler : 함수 () { 
경고 ( "제출!")}

})

<스크립트 유형 = "텍스트 / 자바 스크립트" 
SRC = "JS / jquery.metadata.js"> </ script>

<스크립트 유형 = "텍스트 / 자바 스크립트" 
SRC = "JS / jquery.validate.js"> </ script>

<양식 ID = "myForm을">

  <입력 유형 = "텍스트" 
= "이메일"클래스 이름 = "{확인 : {필요 : 사실, 이메일 : 사실을}}"/>

  <입력 유형 = "제출" 
값 = "제출"/>

</ FORM>

예를 들면 데모

가상의 예

• 오류 메시지 용기
• 데이터 요소로 사용자 정의 메시지
• 라디오 (라디오 버튼), 체크 박스 (버튼 확인)를 선택 (드롭 다운 상자)
• 대화 형 양식 (양식) 및 플러그 (AJAX 제출)
• 사용자 지정 방법 및 메시지 표시
• 동적 양식
• jQuery를 UI Themeroller의 사용자 지정 양식 스타일을 사용하여
• TinyMCE를 - 경량 브라우저 기반 WYSIWYG 편집기
• 파일 입력 상자
• jQuery를 모바일 양식 인증

실제의 예

• 우유 등록 양식
• Marketo와 등록 양식
• 주택 판매 접이식 패널 형태
• 원격 CAPTCHA (PIN) 인증

예 다운로드

다운로드 공식 인스턴스를