JQuery directly traverses, judges, and tests all form items in the form without the need for attributes such as id, name, and class. jqueryclass

JQuery directly traverses, judges, and tests all form items in the form without the need for attributes such as id, name, and class. jqueryclass

Although it looks pretty nice, especially in some pages with more than a single-line text box <input type = "text"/>, multi-line text box <textarea>, when you encounter pages that require specific judgment, you might as well set up an id and retrieve it directly by id. This is simple and convenient, so you don't have to consider traversing the problem. This method is especially used for pages with over-many text boxes, but you do not want to use the server language aspx, jsp, and php to set N IDs. For example, this method can be used to improve the "frontend processing check trilogy before [JavaScript] Form submission" (click to open the link), so the Code does not have to be written so long! At the same time, this method can be used to limit the form and does not require some methods on the Internet. Once traversed, the whole page will be traversed.

I. Basic Objectives

The following is an example. If the number of words in a text box exceeds the upper limit or is empty, a prompt is displayed immediately. The border color of the text box turns red and an alarm is triggered. Here, it can be used to define a form. No matter what is written in an input box other than a form, it is not used for verification.

Ii. HTML layout

It is very simple, but I hope you will notice that an error message is set for div. At the same time, an input box outside the form is set. In addition, all input boxes and multi-line text boxes in the form do not have any attributes such as id, name, and class, but I can still make judgments.

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





Iii. jQuery script
1. Verify the form passed based on the onsubmit attribute
2. Here is actually a paging idea of "[JavaScript] IMG with original ecosystem compatibility with IE6" (click to open the link. If you do not set the alarm of form items that meet the requirements and the Boolean value for submission and judgment to false, remember to restore the form items that meet the requirements to their original state. Otherwise, the user does not need to handle the error message. Because each time you click the submit button, the errMsg variable is cleared.
3. Use $ (obj). find ("input [type = 'text']"). each () to traverse all single-row text boxes. The same applies to other form items. The parameters in each () can be functions. Here is our judgment function. This in this function is every traversal item.
4. function getStrLength () is used to distinguish between English and Chinese characters. The English character is counted as one character, and the Chinese character is counted as two characters.

<Script> function submitPreprocessing (obj) {var isFormOK = true; var I = 0; var j = 0; var errMsg = ""; $ (obj ). find ("input [type = 'text']"). each (function () {I ++; if (getStrLength ($ (this ). val () = 0) {errMsg + = "" + I + "Single Row text box is blank! "Commandid (this0000.css (" border "," 2px solid # ff0000 "); isFormOK = false;} else if (getStrLength ($ (this ). val ()> 10) {errMsg + = "" + I + "more than 5 words in the single-line text box! "Define plugin (this).css (" border "," 2px solid # ff0000 "inline (" border "," 1px solid # cccccccc ") ;}}); $ (obj ). find ("textarea "). each (function ({%j}%;if(getstrlength(%(this%.html () = 0) {errMsg + = "" + j + "multi-line text box is blank! "Commandid (this%.css (" border "," 2px solid # ff0000 "); isFormOK = false;} else if(getstrlength(%(this%.html ()> 20) {errMsg + = "no." + j + "more than 10 words in multi-line text boxes! "Condition (this).css (" border "," 2px solid # ff0000 "condition (" border "," 1px solid # cccccc ") ;}}); if (! IsFormOK) {$ ("# errorMsg" ).html (errMsg + "Please modify it! "); Return false;} else {alert (" thank you for filling in! "); $ (" # ErrorMsg "cmd.html (" "); return false ;}} function getStrLength (str) {var mylen = 0; for (var I = 0; I <str. length; ++ I) {if (str. charCodeAt (I)> 0 & str. charCodeAt (I) <128) {++ mylen;} else {mylen + = 2 ;}} return mylen ;}</script>