Rumah >hujung hadapan web >tutorial js >Ketahui lebih lanjut tentang jQuery Sahkan borang validation_jquery

Ketahui lebih lanjut tentang jQuery Sahkan borang validation_jquery

WBOYasal: 2016-05-16 15:19:341477semak imbas

Contoh dalam artikel ini memperkenalkan pengesahan borang jQuery Ini terutamanya menggunakan jquery.metadata.js untuk menulis peraturan pengesahan secara langsung dalam atribut kelas dan mentakrifkan gesaan mesej ralat Ia dikongsi dengan semua orang untuk rujukan anda adalah seperti berikut

1. Tambahkan pemalam lain jquery.metadata.js dan tulis peraturan pengesahan dalam kawalan.
2. Kaedah mencetuskan pengesahan perlu ditulis semula.

$("#commentForm").validate({meta: "validate"});

3. Kod terperinci adalah seperti berikut:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></script>
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
 <script type="text/javascript">
 $(document).ready(function(){

   $("#commentForm").validate({meta: "validate"});
  
 });
 </script>
 
</head>
<body>
 

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
  <legend>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中</legend>
  <p>
   <label for="cusername">姓名</label>
   <em>*</em><input id="cusername" name="username" size="25" class="{validate:{required:true, minlength:2}}" />
  </p>
  <p>
   <label for="cemail">电子邮件</label>
   <em>*</em><input id="cemail" name="email" size="25"  class="{validate:{required:true, email:true}}" />
  </p>
  <p>
   <label for="curl">网址</label>
   <em> </em><input id="curl" name="url" size="25" value=""  class="{validate:{url:true}}" />
  </p>
  <p>
   <label for="ccomment">你的评论</label>
   <em>*</em><textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true}}" ></textarea>
  </p>
  <p>
   <input class="submit" type="submit" value="提交"/>
  </p>
 </fieldset>
 </form>
</body>
</html>

Peraturan pengesahan lalai:

(1)diperlukan:benar Memerlukan medan
(2)remote:"check.php" Gunakan kaedah ajax untuk memanggil check.php untuk mengesahkan nilai input
(3)email:true Anda mesti memasukkan e-mel dalam format yang betul
(4)url:true Anda mesti memasukkan URL dalam format yang betul
(5)date:true Anda mesti memasukkan tarikh dalam format yang betul Terdapat ralat dalam pengesahan tarikh iaitu6, gunakan dengan berhati-hati
(6)dateISO:true Anda mesti memasukkan tarikh (ISO) dalam format yang betul, contohnya: 2009-06-23, 1998/01/22 Hanya format yang disahkan, bukan kesahihan
(7)nombor:benar Anda mesti memasukkan nombor sah (nombor negatif, perpuluhan)
(8)digit:benar Anda mesti memasukkan integer
(9)kad kredit: Anda mesti memasukkan nombor kad kredit yang sah
(10)equalTo:"#field" Nilai input mestilah sama dengan #field
(11) Terima: Masukkan rentetan dengan akhiran undang-undang (mengalami akhiran fail)
(12)maxlength:5 Masukkan rentetan dengan panjang maksimum 5 (aksara Cina dikira sebagai satu aksara)
(13)minlength:10 Masukkan rentetan dengan panjang minimum 10 (aksara Cina dikira sebagai satu aksara)
(14)jangkauan:[5,10] Panjang input mestilah rentetan antara 5 dan 10") (Aksara Cina dikira sebagai satu aksara)
(15)julat:[5,10] Nilai input mestilah antara 5 dan 10

(16) Max: 5 Nilai input tidak boleh lebih besar daripada 5 (17)min:10 Nilai input tidak boleh kurang daripada 10

Gesaan lalai:

4. Rendering adalah seperti berikut:

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}.")
},

Untuk menggunakan class="{}", pakej mesti diperkenalkan: jquery.metadata.js.

Anda boleh menggunakan kaedah berikut untuk mengubah suai kandungan gesaan:

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

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

6. Tentukan gesaan mesej ralat secara langsung dalam atribut kelas.

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

7. Kesannya adalah seperti berikut:

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang untuk mempelajari pengesahan borang jQuery Baru-baru ini, banyak artikel tentang pengesahan borang jQuery telah dikemas kini.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：pengembangan peraturan pengesahan kotak pengesahan easyui jQuery dan kotak pengesahan easyui validatebox usage_jqueryArtikel seterusnya：pengembangan peraturan pengesahan kotak pengesahan easyui jQuery dan kotak pengesahan easyui validatebox usage_jquery

Artikel berkaitan

Lihat lagi