jQuery Mengesahkan
jQuery Sahkan
jQuery Validate plug-in menyediakan fungsi pengesahan yang berkuasa untuk borang, menjadikan pengesahan borang sebelah pelanggan lebih mudah dan menyediakan sejumlah besar pilihan Penyesuaian untuk memenuhi pelbagai keperluan aplikasi. Pemalam ini menggabungkan satu set kaedah pengesahan yang berguna, termasuk URL dan pengesahan e-mel, dan menyediakan API untuk menulis kaedah yang ditentukan pengguna. Semua kaedah yang digabungkan menggunakan bahasa Inggeris untuk mesej ralat secara lalai dan telah diterjemahkan ke dalam 37 bahasa lain.
Pemalam ini ditulis dan diselenggara oleh Jörn Zaefferer, ahli pasukan jQuery, pembangun utama dalam pasukan UI jQuery dan penyelenggara QUnit. Pemalam ini telah wujud sejak zaman awal jQuery pada tahun 2006 dan telah dikemas kini sejak itu. Versi semasa ialah 1.14.0.
Lawati tapak web rasmi jQuery Validate untuk memuat turun versi terkini pemalam jQuery Validate.
Peraturan pengesahan lalai
| 序号 | 规则 | 描述 |
|---|---|---|
| 1 | required:true | 必须输入的字段。 |
| 2 | remote:"check.php" | 使用 ajax 方法调用 check.php 验证输入值。 |
| 3 | email:true | 必须输入正确格式的电子邮件。 |
| 4 | url:true | 必须输入正确格式的网址。 |
| 5 | date:true | 必须输入正确格式的日期。日期校验 ie6 出错，慎用。 |
| 6 | dateISO:true | 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/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。 |
Gesaan lalai
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 menyediakan pakej gesaan mesej bahasa Cina, yang terletak di dist/localization/messages_zh.js bagi pakej muat turun adalah seperti berikut:
(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} 的数值")});}));Anda boleh menyetempatkan mesej Fail dist/localization/messages_zh.js diperkenalkan ke halaman:
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
Kaedah penggunaan
1 Tulis peraturan pengesahan ke dalam kawalan
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
$("#commentForm").validate();
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<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>
</body>
</html>Jalankan contoh»
Klik butang "Jalankan contoh" untuk melihat contoh dalam talian
2. Tulis peraturan pengesahan ke dalam kod js Di
$().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: "请选择两个主题" }});mesej, jika kawalan tidak mempunyai mesej, mesej lalai
instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().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: "请选择两个主题"
}
});
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<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" style="display:none">至少选择两个</label>
</fieldset>
<p>
<input class="submit" type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>akan dipanggil untuk menjalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
diperlukan: benar Nilai diperlukan.
diperlukan: "#aa:checked" Jika nilai ungkapan itu benar, pengesahan diperlukan.
diperlukan: function(){} mengembalikan benar, menunjukkan bahawa pengesahan diperlukan.
Dua yang terakhir ini biasanya digunakan untuk elemen dalam borang yang perlu diisi atau ditinggalkan pada masa yang sama.
Kaedah dan isu biasa yang perlu diberi perhatian
1 Gunakan kaedah lain untuk menggantikan SUBMIT lalai
$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("提交事件!");
form.submit(); }
});});Gunakan kaedah ajax
$(".selector").validate({
submitHandler: function(form)
{
$(form).ajaxSubmit();
}
})untuk menetapkan nilai lalai. of validate. Penulisan adalah seperti berikut:
$.validator.setDefaults({
submitHandler: function(form) { alert("提交事件!");form.submit(); }});Jika anda ingin menyerahkan borang, anda perlu menggunakan form.submit() dan bukannya $(form).submit().
2. Nyahpepijat, hanya sahkan tetapi tidak menyerahkan borang
Jika parameter ini benar, maka borang tidak akan diserahkan dan hanya diperiksa, yang sangat mudah untuk nyahpepijat.
$().ready(function() {
$("#signupForm").validate({
debug:true });});Jika terdapat berbilang borang pada halaman yang anda ingin tetapkan sebagai nyahpepijat, gunakan:
$.validator.setDefaults({
debug: true})3 abaikan: abaikan elemen tertentu dan jangan sahkan
ignore: ".ignore"
4. Tukar kedudukan di mana mesej ralat dipaparkan
errorPlacement：Callback
menunjukkan kedudukan di mana ralat diletakkan. Lalai ialah: error.appendTo(element.parent()); di sebalik elemen yang disahkan.
errorPlacement: function(error, element) {
error.appendTo(element.parent()); }Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
// 提交时验证表单
var validator = $("#form1").validate({
errorPlacement: function(error, element) {
// Append error within linked label
$( element )
.closest( "form" )
.find( "label[for='" + element.attr( "id" ) + "']" )
.append( error );
},
errorElement: "span",
messages: {
user: {
required: " (必需字段)",
minlength: " (不能少于 3 个字母)"
},
password: {
required: " (必需字段)",
minlength: " (字母不能少于 5 个且不能大于 12 个)",
maxlength: " (字母不能少于 5 个且不能大于 12 个)"
}
}
});
$(".cancel").click(function() {
validator.resetForm();
});
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form method="get" class="cmxform" id="form1" action="">
<fieldset>
<legend>登录框</legend>
<p>
<label for="user">用户名</label>
<input id="user" name="user" required minlength="3">
</p>
<p>
<label for="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>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat instance dalam talian
Fungsi kod ialah: secara amnya, mesej ralat dipaparkan dalam<td class="status"></td>, jika ia adalah radio, ia dipaparkan dalam<td></td> . Jika ia adalah kotak semak, ia dipaparkan di belakang kandungan.
| 参数 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| errorClass | String | 指定错误提示的 css 类名，可以自定义错误提示的样式。 | "error" |
| errorElement | String | 用什么标签标记错误，默认是 label，可以改成 em。 | "label" |
| errorContainer | Selector | 显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大。 errorContainer: "#messageBox1, #messageBox2" | |
| errorLabelContainer | Selector | 把错误信息统一放在一个容器里面。 | |
| wrapper | String | 用什么标签再把上边的 errorELement 包起来。 |
Secara amnya, ketiga-tiga atribut ini digunakan pada masa yang sama untuk merealisasikan fungsi memaparkan semua gesaan ralat dalam bekas dan menyembunyikannya secara automatik apabila tiada maklumat.
errorContainer: "div.error",errorLabelContainer: $("#signupForm div.error"),wrapper: "li"5 Tukar gaya paparan mesej ralat
Tetapkan gaya gesaan ralat, anda boleh menambah paparan ikon, pengesahan.css telah diwujudkan dalam sistem ini, khusus untuk penyelenggaraan dan pengesahan Gaya fail.
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. Setiap medan disahkan dengan melaksanakan fungsi
success：String,Callback
Tindakan selepas elemen yang akan disahkan melepasi pengesahan jika diikuti dengan rentetan, ia akan dianggap sebagai kelas css, atau ia boleh diikuti dengan fungsi.
success: function(label) { // set as text for IE
label.html(" ").addClass("checked"); //label.addClass("valid").text("Ok!")}Tambahkan "sah" pada elemen pengesahan dengan gaya yang ditakrifkan dalam CSS <style>label.valid {}</style>.
success: "valid"
7. Pengubahsuaian kaedah pencetus pengesahan
Walaupun yang berikut adalah jenis boolean, adalah disyorkan untuk tidak menambahkannya secara rawak melainkan anda mahu menukarnya kepada palsu.
| 触发方式 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| 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. Pengesahan tak segerak
remote：URL
Gunakan ajax untuk pengesahan Secara lalai, nilai yang disahkan semasa akan diserahkan ke alamat jauh Jika anda perlu menyerahkan nilai lain, anda boleh menggunakan pilihan data.
remote: "check-email.php"rrree
Alamat jauh hanya boleh mengeluarkan "benar" atau "salah" dan tiada output lain.
9. Tambah pengesahan tersuai
remote: {
url: "check-email.php", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
username: function() { return $("#username").val(); } }}Kaedah pengesahan tersuai
addMethod：name, method, message
Nota: Untuk menambah atau Menambah dalam fail jquery.validate.js. Adalah disyorkan untuk menulisnya dalam fail additional-methods.js.
Nota: Tambah: isZipCode: "hanya boleh memasukkan aksara Cina, huruf Inggeris, nombor dan garis bawah" dalam fail messages_cn.js. Tambahkan rujukan pada fail additional-methods.js sebelum membuat panggilan.
10. Pengesahan radio, kotak semak dan pilih
Yang diperlukan dalam radio bermakna radio mesti dipilih.
// 中文字两个字节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));}, "请正确填写您的邮政编码");Yang diperlukan dalam kotak semak bermakna ia mesti dipilih. Panjang min bagi
<input type="radio" id="gender_male" value="m" name="gender" required /><input type="radio" id="gender_female" value="f" name="gender"/>
kotak semak mewakili nombor minimum yang mesti dipilih, panjang maksimum mewakili bilangan maksimum pilihan dan panjang julat:[2,3] mewakili julat bilangan pilihan. Yang diperlukan dalam
<input type="checkbox" class="checkbox" id="agree" name="agree" required />
pilih bermakna nilai yang dipilih tidak boleh kosong. Panjang min bagi
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" required 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 mewakili bilangan minimum pilihan (pilihan yang boleh berbilang pilihan), panjang max mewakili bilangan maksimum pilihan dan julat:[2,3] mewakili julat bilangan pilihan.
<select id="jungle" name="jungle" title="Please select something!" required> <option value=""></option> <option value="1">Buga</option> <option value="2">Baga</option> <option value="3">Oi</option></select>
jQuery.validate API Cina
| 名称 | 返回类型 | 描述 |
|---|---|---|
| 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,argumentN...) | String | 用参数代替模板中的 {n}。 |
Pengesah
kaedah pengesahan mengembalikan objek Pengesah. Objek Pengesah mempunyai banyak kaedah yang boleh digunakan untuk mencetuskan program pengesahan atau menukar kandungan borang Berikut adalah beberapa kaedah yang biasa digunakan.
| 名称 | 返回类型 | 描述 |
|---|---|---|
| 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 | 增加组合验证类型，在一个类里面用多种验证方法时比较有用。这个是同时加多个验证方法。 |
Kaedah pengesahan terbina dalam
| 名称 | 返回类型 | 描述 |
|---|---|---|
| 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 | 验证美式的电话号码。 |
Pilihan untuk mengesahkan ()
| 描述 | 代码 |
|---|---|
| debug：进行调试模式（表单不提交）。 | <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> |
| 把调试设置为默认。 | $(".selector").validate({
debug:true}) |
| submitHandler：通过验证后运行的函数，里面要加上表单提交的函数，否则表单不会提交。 | $.validator.setDefaults({
debug:true}) |
| ignore：对某些元素不进行验证。 | $(".selector").validate({
submitHandler:function(form) {
$(form).ajaxSubmit();}}) |
| rules：自定义规则，key:value 的形式，key 是要验证的元素，value 可以是字符串或对象。 | $("#myform").validate({
ignore:".ignore"}) |
| messages：自定义的提示信息，key:value 的形式，key 是要验证的元素，value 可以是字符串或函数。 | $(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true}}}) |
| groups：对一组元素的验证，用一个错误提示，用 errorPlacement 控制把出错信息放在哪里。 | $(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true}},
messages:{
name:"Name不能为空",
email:{
required:"E-mail不能为空",
email:"E-mail地址不正确"}}}) |
| OnSubmit：类型 Boolean，默认 true，指定是否提交时验证。 | $("#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}) |
| onfocusout：类型 Boolean，默认 true，指定是否在获取焦点时验证。 | $(".selector").validate({
onsubmit:false}) |
| onkeyup：类型 Boolean，默认 true，指定是否在敲击键盘时验证。 | $(".selector").validate({
onfocusout:false}) |
| onclick：类型 Boolean，默认 true，指定是否在鼠标点击时验证（一般验证 checkbox、radiobox）。 | $(".selector").validate({
onkeyup:false}) |
| focusInvalid：类型 Boolean，默认 true。提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点。 | $(".selector").validate({
onclick:false}) |
| focusCleanup：类型 Boolean，默认 false。当未通过验证的元素获得焦点时，移除错误提示（避免和 focusInvalid 一起使用）。 | $(".selector").validate({
focusInvalid:false}) |
| errorClass：类型 String，默认 "error"。指定错误提示的 css 类名，可以自定义错误提示的样式。 | $(".selector").validate({
focusCleanup:true}) |
| errorElement：类型 String，默认 "label"。指定使用什么标签标记错误。 | $(".selector").validate({
errorClass:"invalid"}) |
| wrapper：类型 String，指定使用什么标签再把上边的 errorELement 包起来。 | $(".selector").validate
errorElement:"em"}) |
| errorLabelContainer：类型 Selector，把错误信息统一放在一个容器里面。 | $(".selector").validate({
wrapper:"li"}) |
| showErrors：跟一个函数，可以显示总共有多少个未通过验证的元素。 | $("#myform").validate({
errorLabelContainer:"#messageBox",
wrapper:"li",
submitHandler:function() {
alert("Submitted!")
}}) |
| errorPlacement：跟一个函数，可以自定义错误放到哪里。 | $(".selector").validate({
showErrors:function(errorMap,errorList) {
$("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");this.defaultShowErrors();}}) |
| success：要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。 | $("#myform").validate({
errorPlacement:function(error,element) {
error.appendTo(element.parent("td").next("td")); },
debug:true}) |
| highlight：可以给未通过验证的元素加效果、闪烁等。 |
kaedah addMethod(nama, kaedah, mesej)
Nama parameter ialah nama kaedah yang ditambahkan.
Kaedah parameter ialah fungsi yang menerima tiga parameter (nilai, elemen, param).
nilai ialah nilai elemen, elemen ialah elemen itu sendiri dan param ialah parameter.
Kami boleh menggunakan addMethod untuk menambah kaedah pengesahan sebagai tambahan kepada kaedah Pengesahan terbina dalam. Sebagai contoh, terdapat medan di mana anda hanya boleh memasukkan satu huruf, dan julatnya ialah a-f Tulisan adalah seperti berikut:
$("#myform").validate({
success:"valid",
submitHandler:function() {
alert("Submitted!")
}})Jika terdapat medan borang dengan id="nama pengguna", tulis dalam ruangan. peraturan:
$.validator.addMethod("af",function(value,element,params){
if(value.length>1){return false;} if(value>=params[0] && value<=params[1]){return true;}else{return false;}},"必须是一个字母,且a-f"); Parameter pertama addMethod ialah nama kaedah pengesahan tambahan, iaitu af dalam kes ini.
Parameter ketiga addMethod ialah gesaan ralat tersuai Gesaan di sini ialah: "Mestilah huruf dan a-f".
Parameter kedua addMethod ialah fungsi Ini lebih penting dan menentukan kaedah penulisan apabila menggunakan kaedah pengesahan ini.
Jika terdapat hanya satu parameter, tuliskannya secara langsung, seperti af: "a", maka a ialah satu-satunya parameter Jika terdapat berbilang parameter, tuliskannya dalam [] dan pisahkan dengan koma.
kaedah rentetan meta
username:{
af:["a","f"]}$("#myform").validate({
meta:"validate",
submitHandler:function() { alert("Submitted!") }})Demonstrasi contoh
Contoh fiksyen
- Bekas mesej ralat
- Mesej Tersuai data elemen
- radio (butang radio), kotak semak (butang semak) dan pilih (kotak lungsur)
- Interaksi dengan pemalam borang (Borang) (penyerahan AJAX)
- Sesuaikan kaedah dan paparan mesej
- Borang dinamik
- Gunakan Themeroller UI jQuery untuk menentukan gaya borang
- TinyMCE - Editor Hasil WYSIWYG berasaskan pelayar yang ringan
- Kotak Input Fail
- Pengesahan Borang Mudah Alih jQuery
Contoh Dunia Sebenar
- Borang Pendaftaran Susu
- Borang Pendaftaran Marketo
- Borang Panel Lipat Jual Beli Rumah
- Pengesahan CAPTCHA (Kod Pengesahan) Jauh
