Bermula dengan jQuery Sahkan borang validation_jquery

Artikel ini menerangkan pengetahuan asas untuk bermula dengan pengesahan borang jQuery Validate Pemalam jQuery Validate menyediakan fungsi pengesahan yang berkuasa untuk borang, menjadikan pengesahan borang sebelah pelanggan lebih mudah pelbagai keperluan permohonan, berikut adalah keseluruhan kandungan artikel ini, dikongsi khas dengan semua orang.

1. Import pustaka js

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

2. Peraturan pengesahan lalai

3. 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).",
 dateDE: "Bitte geben Sie ein gültiges Datum ein.",
 number: "Please enter a valid number.",
 numberDE: "Bitte geben Sie eine Nummer ein.",
 digits: "Please enter only digits",
 creditcard: "Please enter a valid credit card number.",
 equalTo: "Please enter the same value again.",
 accept: "Please enter a value with a valid extension.",
 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}.")
},

Jika anda perlu mengubah suainya, anda boleh menambahkannya pada kod js:

jQuery.extend(jQuery.validator.messages, {
 required: "必选字段",
 remote: "请修正该字段",
 email: "请输入正确格式的电子邮件",
 url: "请输入合法的网址",
 date: "请输入合法的日期",
 dateISO: "请输入合法的日期 (ISO).",
 number: "请输入合法的数字",
 digits: "只能输入整数",
 creditcard: "请输入合法的信用卡号",
 equalTo: "请再次输入相同的值",
 accept: "请输入拥有合法后缀名的字符串",
 maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
 minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
 rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
 range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
 max: jQuery.validator.format("请输入一个最大为{0} 的值"),
 min: jQuery.validator.format("请输入一个最小为{0} 的值")
});

Amalan yang disyorkan ialah meletakkan fail ini ke dalam messages_cn.js dan memperkenalkannya ke dalam halaman:

4. Cara menggunakan
1). Tulis peraturan pengesahan ke dalam kawalan

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


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



 

  Firstname
  
 
 

 E-Mail
 
 
 

 Password
 
 
 

 确认密码
 
 
 

  
 

Untuk menggunakan class="{}", pakej mesti diimport: jquery.metadata.js.
Anda boleh menggunakan kaedah berikut untuk mengubah suai kandungan gesaan:

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

Apabila menggunakan kata kunci equalTo, kandungan berikut mesti disertakan dalam tanda petikan Kod adalah seperti berikut:

class="{required:true,minlength:5,equalTo:'#password'}"

2), tulis peraturan pengesahan ke dalam kod js

$().ready(function() {
 $("#signupForm").validate({
  rules: {
 firstname: "required",
 email: {
 required: true,
 email: true
 },
 password: {
 required: true,
 minlength: 5
 },
 confirm_password: {
 required: true,
 minlength: 5,
 equalTo: "#password"
 }
 },
  messages: {
 firstname: "请输入姓名",
 email: {
 required: "请输入Email地址",
 email: "请输入正确的email地址"
 },
 password: {
 required: "请输入密码",
 minlength: jQuery.format("密码不能小于{0}个字 符")
 },
 confirm_password: {
 required: "请输入确认密码",
 minlength: "确认密码不能小于5个字符",
 equalTo: "两次输入密码不一致不一致"
 }
 }
 });
});

mesej, jika kawalan tidak mempunyai mesej, mesej lalai akan dipanggil

<form id="signupForm" method="get" action="">
 <p>
  <label for="firstname">Firstname</label>
  <input id="firstname" name="firstname" />
 </p>
 <p>
 <label for="email">E-Mail</label>
 <input id="email" name="email" />
 </p>
 <p>
 <label for="password">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>
  <input class="submit" type="submit" value="Submit"/>
 </p>
</form>

diperlukan:benar mesti mempunyai nilai.
diperlukan:"#aa:checked" Jika nilai ungkapan adalah benar, pengesahan diperlukan.
required:function(){} mengembalikan benar, menunjukkan bahawa pengesahan diperlukan.
Dua yang terakhir sering digunakan untuk elemen dalam borang yang perlu diisi atau ditinggalkan pada masa yang sama.

Di atas adalah keseluruhan kandungan artikel ini, yang memperkenalkan pengetahuan pengenalan pengesahan borang jQuery Validate Selepas itu, akan ada kajian mendalam tentang pengesahan borang jQuery Validate.