jQuery Validasi

Impor js perpustakaan (menggunakan CDN tutorial ini)

<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>

Aturan validasi standar

Tips bawaan

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 Validasi menyediakan tips paket informasi Cina, yang terletak di download paket dist / lokalisasi / messages_zh.js, berbunyi sebagai 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, 中文 (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} 的数值")
});

}));

Anda dapat melokalisasi file informasi dist / lokalisasi / messages_zh.js diperkenalkan ke halaman:

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

penggunaan

1, kontrol aturan validasi ditulis

<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>

Coba »

2, kode js aturan validasi ditulis

$().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: "请选择两个主题"
    }
});

pesan di kontrol jika tidak ada pesan, akan menggunakan informasi default

<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>

Coba »

diperlukan: nilai sebenarnyaadalah suatu keharusan.
diperlukan: "#AA: diperiksa" adalah ekspresi dari benar, Anda perlu untuk memverifikasi.
diperlukan: function () {} return true, menyatakan perlunya verifikasi.

Dua umum digunakan di belakang, dalam bentuk perlu mengisi atau tidak mengisi elemen.

metode umum dan perhatian terhadap isu-isu

1, jika tidak, ganti default KIRIMKAN

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

Cara untuk menggunakan ajax

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

Anda dapat mengatur nilai default memvalidasi worded sebagai berikut:

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

Jika Anda ingin mengirimkan formulir, Anda perlu menggunakan form.submit (), bukan $ (bentuk) .submit ().

2, debug, verifikasi tidak hanya menyerahkan formulir

Jika parameter ini benar, maka formulir tersebut tidak disampaikan, hanya pengecekan dilakukan, sangat nyaman saat debugging.

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

Jika halaman yang memiliki beberapa bentuk ingin mengatur untuk debug, menggunakan:

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

3, mengabaikan: abaikan unsur-unsur tertentu tidak diverifikasi

ignore: ".ignore"

4. Ubah lokasi pesan kesalahan ditampilkan

errorPlacement：Callback

Menunjukkan lokasi salah, default adalah: error.appendTo (element.parent ()), yaitu pesan yang salah di belakang elemen otentikasi.

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

contoh

<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>

Coba »

Peran kode ini: Dalam keadaan normal pesan kesalahan ditampilkan dalam <td class = "status"> </ td> jika radio ditampilkan dalam <td> </ td>, jika kotak centang ditampilkan dalam isi belakang.

Biasanya tiga atribut ini secara bersamaan, untuk mencapai tampilan semua fungsi kesalahan dalam sebuah wadah, dan tidak ada informasi secara otomatis tersembunyi.

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

5, mengubah gaya pesan kesalahan ditampilkan

Pengaturan kesalahan gaya, Anda dapat meningkatkan ikon ditampilkan, sistem telah membentuk validation.css, dirancang untuk mempertahankan gaya dokumen verifikasi.

input.error {border: 1px merah padat;}
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, masing-masing bidang diverifikasi dengan melakukan fungsi

 Keberhasilan: String, Callback 

Untuk memverifikasi bahwa unsur-unsur dengan operasi setelah verifikasi, jika diikuti dengan string yang akan diperlakukan sebagai kelas css, tetapi juga dengan fungsi.

Keberhasilan: function (label) {
    // Set & nbsp; sebagai teks untuk IE
    label.html ( "& nbsp;"). addClass ( "diperiksa");
    //label.addClass("valid").text("Ok! ")
}

Tambahkan "valid" untuk memverifikasi elemen didefinisikan dalam gaya CSS <style> label.valid {} </ style>.

sukses: "valid"

7, memodifikasi validasi pemicu

Meskipun berikut adalah boolean, tapi dianjurkan kecuali Anda ingin palsu, jika tidak Freeze menambahkan.

// Atur bentuk $ (). Siap (function () {
 var validator = $ ( "# signupForm"). memvalidasi ({
        submitHandler: function (form) {
            alert ( "diserahkan");   
            form.submit ();
        }    
    });
    $ ( "# Reset"). Klik (function () {
        validator.resetForm ();
    });

});

8, verifikasi asynchronous

 remote: URL 

Cara untuk mengotentikasi menggunakan ajax, diserahkan kepada nilai default saat ini untuk verifikasi alamat remote, jika diperlukan untuk mengirimkan nilai-nilai lain, Anda dapat menggunakan opsi data.

 remote: "check-email.php" 

remote: {
    url: "check-email.php", // Jenis Spooler: "posting", // modus transmisi data dataType: "json", // menerima data format data: {username // data yang akan dilewatkan: function ( ) {
            kembali $ ( "# username") val () .;
        }
    }
}

alamat remote hanya output "benar" atau "palsu", tidak dapat memiliki output lainnya.

9, menambahkan validasi kustom

 addMethod: Nama, metode, pesan 

metode otentikasi kustom

// Karakter dua byte jQuery.validator.addMethod ( "byteRangeLength", fungsi (nilai, elemen, param) {
    Panjang var = value.length;
    for (var i = 0; i <value.length; i ++) {
        jika (value.charCodeAt (i)> 127) {
            Panjang ++;
        }
    }
  kembali this.optional (elemen) || (panjang> = param [0] && panjang <= param [1]);   
}, $ .validator.format ( "Pastikan bahwa nilai yang dimasukkan dalam {0} - {1} antara byte (karakter satu byte count 2)"));

// Verifikasi Postal code jQuery.validator.addMethod ( "isZipCode", fungsi (nilai, elemen) {   
    var tel = / ^ [0-9] {6} $ /;
    kembali this.optional (elemen) || (tel.test (nilai));
} "Silahkan mengisi yang benar kode pos Anda");

Catatan: Untuk menambahkan file tambahan-methods.js atau menambahkan file jquery.validate.js.Rekomendasi umumnya ditulis dalam file tambahan-methods.js.

Catatan: File messages_cn.js, menambahkan: isZipCode: "dapat mencakup teks, huruf, angka, dan garis bawah."Sebelum memanggil Untuk menambahkan referensi file tambahan-methods.js.

10, radio dan kotak centang, pilih verifikasi

radio harus memilih representasi diperlukan.

<Input type = "radio" id = "gender_male" value = "m" name = "gender" diperlukan />
<Input type = "radio" id = "gender_female" value = "f" name = "gender" />

checkbox harus memilih representasi yang diperlukan.

<Input type = "checkbox" class = "checkbox" id = "setuju" name = "setuju" diperlukan />

merupakan jumlah minimal MINLENGTH kotak centang harus diperiksa, maxlength merupakan jumlah maksimum yang dipilih, rangelength: [2,3] mewakili jumlah kisaran yang dipilih.

<Input type = "checkbox" class = "checkbox" id = "spam_email" value = "email" name = "spam []" diperlukan MINLENGTH = "2" />
<Input type = "checkbox" class = "checkbox" id = "spam_phone" value = "telepon" name = "spam []" />
<Input type = "checkbox" class = "checkbox" id = "spam_mail" value = "mail" name = "spam []" />

pilih yang diperlukan menunjukkan nilai yang dipilih tidak boleh kosong.

<Pilih id = "hutan" name = "hutan" title = "Silakan pilih sesuatu!" Diperlukan>
    <Value Option = ""> </ option>
    <Value Option = "1"> Buga </ option>
    <Value Option = "2"> Baga </ option>
    <Value Option = "3"> Oi </ option>
</ Pilih>

pilih dipilih representasi MINLENGTH jumlah minimum (pilihan ganda dari pilih), maxlength mewakili jumlah maksimum yang dipilih, rangelength: [2,3] mewakili jumlah interval yang dipilih.

<Pilih id = "buah" name = "buah" title = "Silakan pilih setidaknya dua buah" class = "{diperlukan: true, MINLENGTH: 2}" beberapa = "beberapa">
    <Option value = "b"> Banana </ option>
    <Value Option = "a"> Apel </ option>
    <Value Option = "p"> Peach </ option>
    <Option value = "t"> Penyu </ option>
</ Pilih>

jQuery.validate API Cina

validator

memvalidasi metode mengembalikan sebuah objek Validator. objek validator memiliki banyak metode yang dapat digunakan untuk memicu prosedur kalibrasi atau mengubah isi formulir, beberapa metode yang umum digunakan tercantum di bawah ini.

Built-in otentikasi

memvalidasi () adalah opsional

$(".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 (nama, metode, pesan) metode

Nama parameter adalah nama dari metode add.

parameter metode adalah fungsi yang mengambil tiga parameter (nilai, elemen, param).
nilai adalah nilai dari elemen, elemen adalah elemen itu sendiri, param adalah parameter.

Kita dapat menggunakan addMethod untuk menambahkan kecuali metode Validasi metode otentikasi built-in. Sebagai contoh, ada lapangan, hanya untuk kalah surat, kisaran adalah af, ditulis sebagai berikut:

$ .validator.addMethod ( "Af", fungsi (nilai, elemen, params) {  
	jika (value.length> 1) {
		return false;
	}
    if (nilai> = params [0] && nilai <= params [1]) {
		kembali benar;
	} Lain {
		return false;
	}
}, "Harus surat, dan af");

Jika ada bentuk bidang id = "username", yang ditulis dalam aturan:

username: {
   af: [ "a", "f"]
}

AddMethod parameter pertama adalah nama dari metode otentikasi untuk menambahkan, maka adalah af.
addMethod parameter ketiga, pesan kesalahan kustom, menyarankan di sini adalah: "harus huruf a, dan af".
addMethod parameter kedua adalah fungsi, ini lebih penting, kata-kata dari keputusan untuk menggunakan metode ini verifikasi.

Jika hanya satu parameter, menulis langsung, seperti af: "a", maka ini adalah parameter yang unik, jika lebih dari satu parameter ditulis dalam [], dipisahkan dengan koma.

Modus String meta

$ ( "# MyForm"). Validasi ({

   meta: "memvalidasi",

   submitHandler: function () { 
alert ( "Diserahkan!")}

})

<Script type = "text / javascript" 
src = "js / jquery.metadata.js"> </ script>

<Script type = "text / javascript" 
src = "js / jquery.validate.js"> </ script>

<Form id = "myform">

  <Input type = "text" 
name = "email" class = "{memvalidasi: {diperlukan: true, email: true}}" />

  <Input type = "submit" 
value = "Submit" />

</ Form>

contoh Demo

contoh fiksi

• pesan kesalahan wadah
• pesan khusus sebagai elemen data
• radio (radio button), kotak centang (tombol cek) dan pilih (drop-down box)
• bentuk interaktif (Form) dan steker (penyerahan AJAX)
• metode khusus dan menampilkan pesan
• Bentuk dinamis
• Gunakan jQuery UI ThemeRoller kustom bentuk gaya
• TinyMCE - berbasis browser ringan editor WYSIWYG
• kotak input File
• jQuery Mobile Forms Authentication

Contoh dunia nyata

• formulir pendaftaran susu
• formulir pendaftaran Marketo
• Dijual perumahan bentuk panel lipat
• Terpencil CAPTCHA (PIN) Verifikasi

contoh Unduh

Ambil contoh resmi