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

序号规则描述
1required:true必须输入的字段。
2remote:"check.php"使用 ajax 方法调用 check.php 验证输入值。
3email:true必须输入正确格式的电子邮件。
4url:true必须输入正确格式的网址。
5date:true必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6dateISO:true必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7number:true必须输入合法的数字(负数,小数)。
8digits:true必须输入整数。
9creditcard:必须输入合法的信用卡号。
10equalTo:"#field"输入值必须和 #field 相同。
11accept:输入拥有合法后缀名的字符串(上传文件的后缀)。
12maxlength:5输入长度最多是 5 的字符串(汉字算一个字符)。
13minlength:10输入长度最小是 10 的字符串(汉字算一个字符)。
14rangelength:[5,10]输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
15range:[5,10]输入值必须介于 5 和 10 之间。
16max:5输入值不能大于 5。
17min: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.

参数类型描述默认值
errorClassString指定错误提示的 css 类名,可以自定义错误提示的样式。"error"
errorElementString用什么标签标记错误,默认是 label,可以改成 em。"label"
errorContainerSelector显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。
errorContainer: "#messageBox1, #messageBox2"

errorLabelContainerSelector把错误信息统一放在一个容器里面。
wrapperString用什么标签再把上边的 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 &nbsp; as text for IE
    label.html("&nbsp;").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.

触发方式类型描述默认值
onsubmitBoolean提交时验证。设置为 false 就用其他方法去验证。true
onfocusoutBoolean失去焦点时验证(不包括复选框/单选按钮)。true
onkeyupBoolean在 keyup 时验证。true
onclickBoolean在点击复选框和单选按钮时验证。true
focusInvalidBoolean提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点。true
focusCleanupBoolean如果是 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删除特殊属性并且返回它们。
自定义选择器
:blankValidator没有值的筛选器。
:filledArray <Element>有值的筛选器。
:uncheckedArray <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