Jquery-validate 란 무엇입니까?
- 青灯夜游원래의
- 2022-05-16 12:17:181747검색
jquery-validate는 양식 검증 플러그인을 의미합니다. 이는 jquery를 기반으로 개발된 검증 플러그인으로, 양식에 대한 강력한 검증 기능을 제공하고 플러그인 번들을 더욱 쉽게 만듭니다. URL 및 이메일 확인을 포함한 유용한 검증 방법을 제공하는 동시에 사용자 정의 방법을 작성하기 위한 API를 제공합니다.
이 튜토리얼의 운영 환경: windows7 시스템, jquery2.2.1&&jquery-validate1.14.0 버전, Dell G3 컴퓨터.
jquery-validate는 jquery를 기반으로 개발된 검증 플러그인인 Form Validate 플러그인을 말합니다.
jQuery Validate 플러그인은 양식에 대한 강력한 유효성 검사 기능을 제공하여 클라이언트 측 양식 유효성 검사를 더 쉽게 만드는 동시에 다양한 애플리케이션 요구 사항을 충족할 수 있는 다양한 사용자 정의 옵션을 제공합니다. 플러그인은 URL 및 이메일 검증을 포함한 유용한 검증 방법 세트를 번들로 제공하고 사용자 정의 방법을 작성하기 위한 API를 제공합니다. 번들로 제공되는 모든 메서드는 기본적으로 오류 메시지에 영어를 사용하며 37개 다른 언어로 번역되었습니다.
이 플러그인은 jQuery 팀의 구성원이자 jQuery UI 팀의 수석 개발자이자 QUnit의 관리자인 Jörn Zaefferer가 작성하고 유지 관리합니다. 이 플러그인은 2006년 jQuery 초창기부터 사용되어 왔으며 그 이후로 계속 업데이트되었습니다. 현재 버전은 1.14.0입니다.
jQuery Validate 공식 웹사이트를 방문하여 최신 버전의 jQuery Validate 플러그인을 다운로드하세요.
1.14.0 버전 다운로드 주소: http://libs.cdnjs.net/jquery-validate/1.14.0/
JS 라이브러리 가져오기
<script src="http://libs.cdnjs.net/jquery/2.2.1/jquery.js" rel="external nofollow" rel="external nofollow" ></script> <script src="http://libs.cdnjs.net/jquery-validate/1.14.0/jquery.validate.min.js" rel="external nofollow" rel="external nofollow" ></script>
기본 확인 규칙
| 일련번호 | Rule | Description |
|---|---|---|
| 1 | 필수:true | 입력해야 하는 필드입니다. |
| 2 | remote:"check.php" | ajax 메서드를 사용하여 check.php를 호출하여 입력 값을 확인합니다. |
| 3 | email:true | 올바른 형식의 이메일을 입력해야 합니다. |
| 4 | url:true | URL을 올바른 형식으로 입력해야 합니다. |
| 5 | date:true | 날짜는 올바른 형식으로 입력해야 합니다. 날짜 확인(ie6 오류), 주의해서 사용하세요. |
| 6 | dateISO:true | 날짜(ISO)를 올바른 형식으로 입력해야 합니다(예: 2009-06-23, 1998/01/22). 유효성은 확인되지 않고 형식만 확인됩니다. |
| 7 | 숫자:true | 적법한 숫자(음수, 소수)를 입력해야 합니다. |
| 8 | digits:true | 정수를 입력해야 합니다. |
| 9 | 신용카드: | 적법한 신용카드 번호를 입력해야 합니다. |
| 10 | equalTo:"#field" | 입력 값은 #field와 동일해야 합니다. |
| 11 | accept: | 법적 접미사(업로드된 파일의 접미사)가 포함된 문자열을 입력하세요. |
| 12 | 최대 길이: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: "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 Validate提供了中文信息提示包，位于下载包的 /localization/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, 中文 (Zhōngwé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} 的数值")
});
}));你可以将该本地化信息文件 /localization/messages_zh.js 引入到页面：
<script src="http://libs.cdnjs.net/jquery-validate/1.14.0/localization/messages_zh.js" rel="external nofollow" rel="external nofollow" ></script>
使用方式
1、将校验规则写到控件中
<script src="http://libs.cdnjs.net/jquery/2.2.1/jquery.js" rel="external nofollow" rel="external nofollow" ></script>
<script src="http://libs.cdnjs.net/jquery-validate/1.14.0/jquery.validate.min.js" rel="external nofollow" rel="external nofollow" ></script>
<script src="http://libs.cdnjs.net/jquery-validate/1.14.0/localization/messages_zh.js" rel="external nofollow" rel="external nofollow" ></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
$("#commentForm").validate();
});
</script>
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: "请选择两个主题"
}
})
});messages 处，如果某个控件没有 message，将调用默认的信息
<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>说明：
required: true 值是必须的。
required: "#aa:checked" 表达式的值为真，则需要验证。
required: function(){} 返回为真，表示需要验证。
后边两种常用于，表单中需要同时填或不填的元素。
常用方法及注意问题
1、用其他方式替代默认的 SUBMIT
$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("提交事件!");
form.submit();
}
});
});使用 ajax 方式
$(".selector").validate({
submitHandler: function(form)
{
$(form).ajaxSubmit();
}
})可以设置 validate 的默认值，写法如下：
$.validator.setDefaults({
submitHandler: function(form) { alert("提交事件!");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());
}【推荐学习：jQuery视频教程、web前端视频】
위 내용은 Jquery-validate 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：jquery-form이란 무엇입니까?다음 기사：jquery-form이란 무엇입니까?