최고의 jQuery를 검증 튜토리얼 2024년, 이 튜토리얼에서는 (이 튜토리얼의 CDN을 사용) 가져 오기 JS 라이브러리,기본 유효성 검사 규칙,기본 팁,용도,문제에 대한 일반적인 방법 및주의,jQuery.validate 중국어 API,예를 들면 데모,를 배울 수 있습니다.
사용자 정의 옵션을 많이 제공하는 응용 프로그램 요구 사항을 충족하면서 폼 인증에 대한 jQuery를 검증 플러그인은 쉽게 클라이언트 측 폼 유효성 검사를 할 수있는 강력한 기능을 제공합니다. 이 API의 제조를위한 사용자 정의 된 방법을 제공 플러그인은, URL 및 전자 메일을 포함한 인증 확인 방법의 유용한 세트 번들. 모든 바인딩 기본 오류 메시지로 영어를 사용하는 방법, 및 37 다른 언어로 번역되었다.
플러그인을 작성하고 요른 Zaefferer에 의해 유지되고, 그가 jQuery를 팀의 구성원 인 jQuery를 UI 팀의 리드 개발자가 QUnit 유지 보수 인력입니다. 플러그인 2006 jQuery를 조기 이미 등장하기 시작하면, 이후 업데이트되었습니다. 현재 버전은 1.14.0입니다.
액세스 jQuery를 검증 공식 웹 사이트는 jQuery를 검증 플러그인의 최신 버전을 다운로드합니다.
버전 1.14.0 다운로드이 튜토리얼 : http://static.w3write.com/download/jquery-validation-1.14.0.zip
<script src="http://static.w3write.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.w3write.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
아니오. | 규칙 | 기술 |
---|---|---|
(1) | 필요는 true | 당신은 필드를 입력해야합니다. |
이 | 원격 : "check.php" | AJAX 메소드 호출을 사용하여 입력 값을 검증 check.php. |
3 | 이메일 : 사실 | 올바른 전자 메일 형식을 입력해야합니다. |
4 | URL : 사실 | 올바른 URL 형식을 입력해야합니다. |
(5) | 날짜 : 사실 | 올바른 날짜 형식을 입력해야합니다. IE6 날짜 유효성 검사 오류에주의하십시오. |
6 | dateISO : 사실 | 당신은 예를 들어, 올바른 날짜 형식 (ISO)를 입력해야합니다 2009-06-23,1998 / 1월 22일합니다. 확인하지 않습니다 전용 형식을 확인합니다. |
(7) | 번호 : 사실 | 유효한 번호 (음수, 소수)를 입력해야합니다. |
8 | 숫자는 true | 당신은 정수를 입력해야합니다. |
9 | 크레딧 카드 : | 유효한 신용 카드 번호를 입력해야합니다. |
(10) | EqualTo가 : "# 필드" | 입력 값은 같은 #field해야합니다. |
(11) | 동의 : | 입력 문자열은 합법적 인 확장 (접미사 업로드 파일)가 있습니다. |
(12) | 최대 길이 : 5 | 입력 문자열 (5)의 최대 길이 (한자는 하나의 문자로 간주). |
(13) | MINLENGTH : 10 | 입력 문자열의 최소 길이는 10 (문자 한 문자로 계산)입니다. |
(14) | rangelength : [5,10] | 입력 문자열의 길이는 5, 10 (한자 글자 수) 사이에 있어야합니다. |
(15) | 범위 : [5,10] | 값이 5와 10 사이 여야 입력합니다. |
(16) | 최대 : 5 | 5보다 큰 값을 입력합니다. |
(17) | 분 : 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 ).", 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", "ko/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.w3write.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script src="http://static.w3write.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.w3write.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="http://static.w3write.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>
$().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를 돌려, 검증의 필요성을 표명했다.
일반적으로 형태로, 뒷면에 사용 된 두 채우거나 요소를 채울 필요가있다.
$().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를 (사용해야합니다.
이 매개 변수가 true의 경우, 다음 양식이 제출되지 만 검사를 디버깅 할 때 매우 편리하다, 수행.
$().ready(function() { $("#signupForm").validate({ debug:true }); });
페이지가 여러 형태의 디버그 설정하려는 경우, 사용
$.validator.setDefaults({ debug: true })
ignore: ".ignore"
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>, 체크 박스는의 내용에 표시되어있는 경우 뒤에.
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
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"
스타일의 오류를 설정하면 시스템이 검증 문서의 스타일을 유지하기 위해 설계된 validation.css를 설립했다, 아이콘이 표시됩니다 증가시킬 수있다.
input.error {국경 : 1 픽셀 고체 빨간} label.error { 배경 : 홈페이지 ( "unchecked.gif ./ 데모 / 이미지 /") 노 반복 0 픽셀의 0 픽셀; 패딩 왼쪽 : 16px; 패딩 바닥 : 2 픽셀; 글꼴 - 무게 : 굵게; 색상 : #의 EA5200; } label.checked { 배경 : 홈페이지 ( "./ 데모 / 이미지 / checked.gif") 노 반복 0 픽셀의 0 픽셀; }
성공 : 문자열, 콜백
확인하려면 그뿐만 아니라 기능, CSS 클래스로 처리됩니다 문자열 다음에 경우 확인 후 동작에 의해 요소.
성공 : 기능 (라벨) { // 설정 & NBSP; IE에 대한 텍스트로 label ( "& NBSP;"). addClass는 ( "확인"); //label.addClass("valid").text("Ok! ") }
<스타일> label.valid {} </ 스타일> CSS 스타일에 정의 된 요소를 확인하기 위해 "유효"추가합니다.
성공 : "유효"
다음은 부울이지만 false로 원하지 않는다면,하지만 권장, 그렇지 않으면 동결했다.
触发方式 | 类型 | 描述 | 默认值 |
---|---|---|---|
onsubmit | Boolean | 提交时验证。设置为 false 就用其他方法去验证。 | true |
onfocusout | Boolean | 失去焦点时验证(不包括复选框/单选按钮)。 | true |
onkeyup | Boolean | 在 keyup 时验证。 | true |
onclick | Boolean | 在点击复选框和单选按钮时验证。 | true |
focusInvalid | Boolean | 提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点。 | true |
focusCleanup | Boolean | 如果是 true 那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用。 | false |
//) (양식 $를 재설정합니다. 준비 (함수 () { var에 검증 = $ ( "#의 signupForm"). 검증 ({ submitHandler : 기능 (양식) { 경고 ( "제출"); form.submit (); } }); $ ( "# 재설정"). () {(기능을 클릭 validator.resetForm (); }); });
원격 : URL
다른 값을 제출해야하는 경우 원격 주소 확인에 현재의 디폴트 값에 제출 아약스를 사용하여 인증하는 방법은, 당신은 데이터 옵션을 사용할 수 있습니다.
원격 : "체크 email.php를"
원격 : { URL : // 스풀러 유형 "-email.php 확인": "게시물", // 데이터 전송 모드 데이터 형식 : "json으로", // 데이터 형식의 데이터를 수신 : {전달되는 사용자 이름 // 데이터 : 기능 ( ) { $를 반환 ( "# 사용자 이름") 발 (); } } }
원격 주소는 출력이 "true"또는 "false"는, 다른 출력을 가질 수 없습니다.
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 파일 참조를 추가하려면 호출하기 전에.
라디오는 필수 표현을 선택해야합니다.
<입력 유형 = "라디오"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"> 거북이 </ 옵션> </ 선택>
名称 | 返回类型 | 描述 |
---|---|---|
validate(options) | Validator | 验证所选的 FORM。 |
valid() | Boolean | 检查是否验证通过。 |
rules() | Options | 返回元素的验证规则。 |
rules("add",rules) | Options | 增加验证规则。 |
rules("remove",rules) | Options | 删除验证规则。 |
removeAttrs(attributes) | Options | 删除特殊属性并且返回它们。 |
自定义选择器 | ||
:blank | Validator | 没有值的筛选器。 |
:filled | Array <Element> | 有值的筛选器。 |
:unchecked | Array <Element> | 没选择的元素的筛选器。 |
实用工具 | ||
jQuery.format(template,argument,argumentNko.) | String | 用参数代替模板中的 {n}。 |
방법은 검사기 개체를 반환 확인합니다. 검사기 개체가 많은 방법 양식의 내용을 교정 절차를 트리거하거나 변경하는 데 사용할 수 있습니다, 몇 가지 일반적으로 사용되는 방법은 다음과 같습니다.
名称 | 返回类型 | 描述 |
---|---|---|
form() | Boolean | 验证 form 返回成功还是失败。 |
element(element) | Boolean | 验证单个元素是成功还是失败。 |
resetForm() | undefined | 把前面验证的 FORM 恢复到验证前原来的状态。 |
showErrors(errors) | undefined | 显示特定的错误信息。 |
Validator 函数 | ||
setDefaults(defaults) | undefined | 改变默认的设置。 |
addMethod(name,method,message) | undefined | 添加一个新的验证方法。必须包括一个独一无二的名字,一个 JAVASCRIPT 的方法和一个默认的信息。 |
addClassRules(name,rules) | undefined | 增加组合验证类型,在一个类里面用多种验证方法时比较有用。 |
addClassRules(rules) | undefined | 增加组合验证类型,在一个类里面用多种验证方法时比较有用。这个是同时加多个验证方法。 |
名称 | 返回类型 | 描述 |
---|---|---|
required() | Boolean | 必填验证元素。 |
required(dependency-expression) | Boolean | 必填元素依赖于表达式的结果。 |
required(dependency-callback) | Boolean | 必填元素依赖于回调函数的结果。 |
remote(url) | Boolean | 请求远程校验。url 通常是一个远程调用方法。 |
minlength(length) | Boolean | 设置最小长度。 |
maxlength(length) | Boolean | 设置最大长度。 |
rangelength(range) | Boolean | 设置一个长度范围 [min,max]。 |
min(value) | Boolean | 设置最小值。 |
max(value) | Boolean | 设置最大值。 |
email() | Boolean | 验证电子邮箱格式。 |
range(range) | Boolean | 设置值的范围。 |
url() | Boolean | 验证 URL 格式。 |
date() | Boolean | 验证日期格式(类似 30/30/2008 的格式,不验证日期准确性只验证格式)。 |
dateISO() | Boolean | 验证 ISO 类型的日期格式。 |
dateDE() | Boolean | 验证德式的日期格式(29.04.1994 或 1.1.2006)。 |
number() | Boolean | 验证十进制数字(包括小数的)。 |
digits() | Boolean | 验证整数。 |
creditcard() | Boolean | 验证信用卡号。 |
accept(extension) | Boolean | 验证相同后缀名的字符串。 |
equalTo(other) | Boolean | 验证两个输入框的内容是否相同。 |
phoneUS() | Boolean | 验证美式的电话号码。 |
描述 | 代码 |
---|---|
debug:进行调试模式(表单不提交)。 |
$(".selector").validate ({ debug:true }) |
把调试设置为默认。 |
$.validator.setDefaults({ debug:true }) |
submitHandler:通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交。 |
$(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit(); } }) |
ignore:对某些元素不进行验证。 |
$("#myform").validate({ ignore:".ignore" }) |
rules:自定义规则,key:value 的形式,key 是要验证的元素,value 可以是字符串或对象。 |
$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } } }) |
messages:自定义的提示信息,key:value 的形式,key 是要验证的元素,value 可以是字符串或函数。 |
$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } }, messages:{ name:"Name不能为空", email:{ required:"E-mail不能为空", email:"E-mail地址不正确" } } }) |
groups:对一组元素的验证,用一个错误提示,用 errorPlacement 控制把出错信息放在哪里。 |
$("#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 }) |
OnSubmit:类型 Boolean,默认 true,指定是否提交时验证。 |
$(".selector").validate({ onsubmit:false }) |
onfocusout:类型 Boolean,默认 true,指定是否在获取焦点时验证。 |
$(".selector").validate({ onfocusout:false }) |
onkeyup:类型 Boolean,默认 true,指定是否在敲击键盘时验证。 |
$(".selector").validate({ onkeyup:false }) |
onclick:类型 Boolean,默认 true,指定是否在鼠标点击时验证(一般验证 checkbox、radiobox)。 |
$(".selector").validate({ onclick:false }) |
focusInvalid:类型 Boolean,默认 true。提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点。 |
$(".selector").validate({ focusInvalid:false }) |
focusCleanup:类型 Boolean,默认 false。当未通过验证的元素获得焦点时,移除错误提示(避免和 focusInvalid 一起使用)。 |
$(".selector").validate({ focusCleanup:true }) |
errorClass:类型 String,默认 "error"。指定错误提示的 css 类名,可以自定义错误提示的样式。 |
$(".selector").validate({ errorClass:"invalid" }) |
errorElement:类型 String,默认 "label"。指定使用什么标签标记错误。 |
$(".selector").validate errorElement:"em" }) |
wrapper:类型 String,指定使用什么标签再把上边的 errorELement 包起来。 |
$(".selector").validate({ wrapper:"li" }) |
errorLabelContainer:类型 Selector,把错误信息统一放在一个容器里面。 |
$("#myform").validate({ errorLabelContainer:"#messageBox", wrapper:"li", submitHandler:function() { alert("Submitted!") } }) |
showErrors:跟一个函数,可以显示总共有多少个未通过验证的元素。 |
$(".selector").validate({ showErrors:function(errorMap,errorList) { $("#summary")("Your form contains " + this.numberOfInvalids() + " errors,see details below."); this.defaultShowErrors(); } }) |
errorPlacement:跟一个函数,可以自定义错误放到哪里。 |
$("#myform").validate({ errorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td")); }, debug:true }) |
success:要验证的元素通过验证后的动作,如果跟一个字符串,会当作一个 css 类,也可跟一个函数。 |
$("#myform").validate({ success:"valid", submitHandler:function() { alert("Submitted!") } }) |
highlight:可以给未通过验证的元素加效果、闪烁等。 |
매개 변수 이름은 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>