Frontend programming improvement Tour (10) ---- Form Verification plug-in and cookie plug-in, ---- cookie

Frontend programming improvement Tour (10) ---- Form Verification plug-in and cookie plug-in, ---- cookie

In actual project development, a common way to interact with users is to use forms to obtain user registration, login, and other information. When a user registers or logs on, the user's logon status must be remembered. This involves two common operations: Form Verification and cookie addition, deletion, and search.

Of course, project development can solve the above two problems manually or using native code, and the best practice should be to stand on the shoulders of giants, from the rational speculation perspective and the principle of not repeating the wheel, we should focus on the implementation of the project logic more quickly, efficiently, and stably.

I. Form Verification plug-in (jQuery Validate)

Official Description: Only one row is required to select the form and apply the validation plug-in. Add some notes to each element to specify valid rules.

JQuery Validate can write verification rules to the internal form items of the form, but this does not implement the separation of behavior and structure, which is not readable and highly coupled. Generally, the name attribute is used to associate fields and verification rules.

First, create a form:

<Form class = "cmxform" id = "commentForm" method = "get" action = ""> <fieldset> <legend> A simple comment example for verification with verification prompts </ legend> <p> <label for = "cusername"> name </label> <em> * </em> <input id = "cusername" name = "username" size = "25"/> </p> <label for = "cemail"> email </label> <em> * </em> <input id = "cemail "name =" email "size =" 11 "/> </p> <label for =" mobile "> mobile phone </label> <em> * </em> <input id = "cmobile" name = "mobile" size = "25"/> </p> <label for = "curl"> URL </label> <em> </em> <input id = "curl" name = "url" size = "25" value = ""/> </p> <label = "ccomment"> your comment </label> <em> * </em> <textarea id = "ccomment" name = "comment" cols = "22"> </ textarea> </p> <input class = "submit" type = "submit" value = "submit"/> </p> </fieldset> </form>

Form Structure After the verification plug-in is introduced, verify the code of the rule:

$ ("# CommentForm "). validate ({// verification rule rules: {mobile: {required: true, isMobile: true}, username: {required: true, minlength: 2}, email: {required: true, email: true}, url: "url", comment: "required"}, // message messages: {mobile: {required: "the mobile phone number cannot be blank ", minlength: "the mobile phone number must be at least 11 characters"}, username: {required: "The user name cannot be blank", minlength: "The user name must be at least two characters"}, email: {required: "email cannot be blank", email: "enter the correct email format"}, url: "enter the correct url format", comment: "comment cannot be blank "}});

$ ("# CommentForm"). validate (). This code is a standard usage of the jquery plug-in. The selector selects the dom node to construct a jquery object and calls the plug-in function on this object. The validate method contains two parts of data: one is the validation rule "rules", and the other is the verification prompt "messages ". The two pieces of information are internal, and the specific verification rules are associated according to the form item name attribute in the form.
When submitting the form filled above, a message is displayed. Whether the form can be submitted or not. You can use the valid function to determine whether the valid return value is as follows:
This method can be used to verify whether a form is submitted. When the form is filled normally, for example:
Return Value. For example:
JQuery Validate also allows you to customize verification rules. In this example, le di re-defines a mobile phone number verification rule:

JQuery. validator. addMethod ("isMobile", function (value, element) {var length = value. length; return length = 11 & amp;/^ [1] [3-8] \ d {9} $ /. test (value) ;}, "enter the correct mobile phone number ");

The verification rule writing method consists of three parts: the verification rule name, the verification function, and the verification return information. Verification rule call:

mobile: {        required: true,        isMobile:true      }

  Ii. Use of cookie plug-ins In the cookie plug-in official documentation, it is not difficult to find that the cookie plug-in is easy to use. After the plug-in file is introduced, construct the following structure:

User name: <input type = "text" name = "username" id = "username"/> <br/> <input type = "checkbox" name = "check" id = "check" /> remember the user name

Script:

Var COOKIE_NAME = 'username'; if ($. cookie (COOKIE_NAME) {// retrieve the cookie value $ ("# username "). val ($. cookie (COOKIE_NAME);} $ ("# check "). click (function () {if (this. checked) {$. cookie (COOKIE_NAME, $ ("# username "). val (), {path: '/', expires: 10});} else {$. cookie (COOKIE_NAME, null, {path: '/'}); // Delete the cookie value and set the value to null}); // record whether to click the single button, whether to store data into cookies

The page uses a single-choice button to select or not to record the storage and deletion of cookies. Select a ticket
Data storage cookie
Cancel Ticket Renewal
Clear cookie Note that two methods can be used to clear a cookie. One is to remove $. removeCookie ('name'), and the other is to set the cookie value to null.