Learn how to use jQuery Form Verification plug-in and calendar plug-in, jquery form

Learn how to use jQuery Form Verification plug-in and calendar plug-in, jquery form

First, you will learn how to use the jQuery Form Verification plug-in:

1. learning and using the Jquery Form Verification plug-in Validation

(1) Validation has several rules. One is to define verification rules in the class attribute, such as class = "required", minlength = "2 ". To fully compile the validation rules into the class attribute, the other method is to introduce the new jquery plug-in-jquery. metadata. javaScript to implement the definition of verification rules. In this case, the method called for Form Verification is changed to the following code:
Set $ ("# form "). validate (), changed to $ ("# form "). validate ({meta: "validate"}), the code written to the class attribute is as follows:

Class=”{validate:{required:true,minlength:2}}”

(2) In order to completely separate behavior and structure, another rule is used in code writing, and fields and verification rules are associated by using the name attribute. To completely separate the authentication behavior from the HTML structure, the implementation code is as follows:

Code in Html:

<td><input type="text" name="ccarnumber" id="carnumber" /></td>

JS Code:

$("#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,   },  },

Here, carnumcheck and carphonecheck are custom verification functions, which verify the license plate number and contact information respectively.

(3) to implement the form plug-in culture, you need to introduce the library provided by the plug-in, jquery. validate. messages_cn.js

2. select and use the time selector plug-in

The daterangepicker Time Selection plug-in is used in code writing. The plug-in interface is beautiful and can be used to select time and date (dual calendar). The operation steps of using the plug-in are described as follows.

(1) first introduce js Code and CSS styles, as shown below.

<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) The JS Code is as follows. The following code indicates two input text boxes: start and end time. DateRangePicker also has many date styles and representations.

$('#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);  } });

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.