首先學習使用jQuery表單驗證插件：
1.Jquery表單驗證插件―Validation的學習與使用
（1）Validation的驗證有幾種規則，一是在class屬性中定義驗證規則，如class=“required”,minlength=”2”。為了實現將驗證規則完全編寫到class屬性中，另外一種是通過引入新的jquery插件-jquery.metadata.js來實現驗證規則的定義，此時表單的驗證調用的方法改為如下所示的代碼：
將$(“#form”).validate()，改為$(“#form”).validate({meta:”validate”})，寫到class屬性中的代碼如下所示：
Class=”{validate:{required:true,minlength:2}}”（2）為了實現行為與結構的完全分離，在編寫代碼中使用的是另外一種規則，通過使用name屬性來關聯字段和驗證規則。使驗證行為和HTML結構完全分離，實現代碼如下：
Html中的代碼：
<td><input type="text" name="ccarnumber" id="carnumber" /></td>
JS代碼：
$("#order").validate({ rules:{ ccarnumber:{ required:true, minlength:2, }, ccarid:{ required:true, carnumcheck: $("#carid").val(), }, cusername:{ required:true, }, cuserphone:{ required:true, carphonecheck: $("#userphone").val(), }, ccarbalance:{ required:true, }, },其中carnumcheck和carphonecheck為自定義驗證函數，分別驗證車牌號和聯系方式。
(3)為了實現表單插件的中文化，需要引入該插件提供的中文庫，jquery.validate.messages_cn.js
2.時間選擇器插件的選擇與使用學習
在編寫代碼中使用的是daterangepicker這款時間選擇插件，該插件界面美好，且能夠實現時間日期選擇（雙日歷），使用插件的操作步驟描述如下。
(1) 首先需要引入js代碼和CSS樣式，帶啊如下所示。
<script src="js/dist/moment.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="js/dist/daterangepicker.css" rel="external nofollow" ><script type="text/javascript" src="js/dist/jquery.daterangepicker.min.js"></script>
(2) JS代碼如下所示。下述代碼表示的是兩個輸入文本框，選擇開始和結束時間。DateRangePicker也有很多種日期的樣式與表現方式
$('#two-inputs').dateRangePicker( { getValue: function() { if ($('#startTime').val() && $('#stopTime').val() )return $('#startTime').val() + ' to ' + $('#stopTime').val(); else return ''; }, setValue: function(s,s1,s2) { $('#startTime').val(s1); $('#stopTime').val(s2); } });以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
