[JQuery] uses form serialization to retrieve forms based on name for Form Verification and jquery serialization.

[JQuery] uses form serialization to retrieve forms based on name for Form Verification and jquery serialization.

There are many ways to perform form verification on the front-end. The specific idea is that you should first extract the values in the items to be verified in the form, and then judge at the script, finally, an alarm is triggered based on the judgment result. Then, the Boolean values of true and false are returned for the onsubmit = "return XX ()" function. In the whole process, it is critical to obtain the verification items of the form. In [JavaScript] form instant verification without submitting successfully (click to open the link), the id is used to retrieve the attributes of each form item, which is the most basic, but what if we need to retrieve the form items using the name method? In this case, you can use jQuery serialization to retrieve the items in the form based on the name.

I. Basic Objectives

JQuery serialization is used to retrieve various items of the Form Based on name for form verification. For example. If the user enters the form correctly, all information entered by the user is displayed.

Ii. HTML layout

First, paste the HTML layout code of the form. Very simple. Note that I only assigned the name attribute to each form item without the id attribute. The following Jquery script takes values based on the name.

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


Iii. Jquery script

1. At the beginning of the script, after the form is obtained, all values in form are obtained using the serialize () method. The return value of the serialize () method is a string submitted in the get method, as you can see above. Then, use the split () method to divide the array into rawParamArray according to &. every element in the array rawParamArray is in the form of paramName = paramValue, which is in the form of user = sss. Then, the array rawParamArray is traversed to traverse every item of rawParamArray, And the array ParamArray is divided by = again. The first item of the obtained array ParamArray is the attribute name, and the second item is the attribute value. Then, you can determine how to judge. If an item fails to be judged, the Boolean value of this item is converted to false.
2. for single-member radio and check box checkbox, if the attribute name of a single item is not obtained, the attribute value means that this single-member and check box is not selected at all!
3. For Password items, it is necessary to determine whether they are consistent with the subsequent password items. Therefore, you must obtain the Next Password item at the same time to determine if you are bored. If you are bored, you can confirm the password items, set the id and directly use the id to retrieve it.

<Script> function submitPreprocessing (obj) {var inputTextOK = true; var passwordLength = false; var passwordCheck = false; var radioSelected = false; var checkboxSelected = false; var rawParamArray = $ (obj ). serialize (). split ("&"); for (var I = 0; I <rawParamArray. length; I ++) {var ParamArray = rawParamArray [I]. split ("="); if (ParamArray [0] = "user") | (ParamArray [0] = "pwd ") | (ParamArray [0] = "ps") {if (ParamArray [1] = "") {inputTextO K = false ;}} if (ParamArray [0] = "pwd") {if (ParamArray [1]. length> 5) {passwordLength = true;} if (ParamArray [1] + "" = (rawParamArray [I + 1]. split ("=") [1] + "") {passwordCheck = true ;}} if (ParamArray [0] = "r ")) {radioSelected = true;} if (ParamArray [0] = "c1") {checkboxSelected = true ;}} if (! InputTextOK) {alert ("either user name, password, or remarks is blank! ");} If (! PasswordLength) {alert ("Your password is shorter than 6 characters! ");} If (! PasswordCheck) {alert ("the two passwords are inconsistent! ");} If (! RadioSelected) {alert ("your ticket has not been selected! ");} If (! CheckboxSelected) {alert ("Your c1 check box is not selected yet! ");} If (inputTextOK & passwordLength & passwordCheck & radioSelected & checkboxSelected) {alert (" thank you for filling in "); alert ($ (obj ). serialize (); return true;} else {alert ("Your form is not finished yet! "); Return false ;}}</script>