Home > Developer > Web Develop
HTML code:
1 <formAction="#"onsubmit= "return Validate_form (this);"Method= "POST">2Email:<inputtype= "text"name= "emails"size= "+"><BR>3Phone:<inputtype= "text"name= "Phone"size= "+"><BR>4 <inputtype= "Submit"value= "Submit"> 5 </form>
Js:
1 functionvalidate_required (field,alerttxt) {2 with(field) {3 /*returns False if the input box value is empty*/4 if(value==NULL|| value== ""){5Alert (name+alerttxt);6 return false7}Else {8 return true9 }Ten } One } A - /*Form Validation*/ - functionValidate_form (thisform) { the with(thisform) { - for(i=0; i< elements.length-1; i++){ - /*Traverse Form Content*/ - if(Validate_required (Elements[i], "must be filled out!") ==false){ +Elements[i].focus ();//Highlight blank input box - return false + } A } at } - return true; -}Ii. the difference between childNodes and children
1. ChildNodes: It is a standard property that returns a collection of child nodes of a specified element, including an HTML node, all attributes and text nodes (including line breaks and spaces, also counted as a node).
For example, the following section of the HTML Code Head tag node:
1 <Head>2 <MetaCharSet= "Utf-8">3 <Scripttype= "Text/javascript"src= "G:/developsoftware/sublime/workspace/js/js/jquery.js"/></Script>4 <title>JS Test</title>5 </Head>
I want to get the title content of the page and modify it by getting the child node, using the JS method as follows
1 varh = document.getElementsByTagName ("Head") [0].childnodes;//Gets the child node collection for the head tag2 for(i=0; i){3 /*Print node tag name, node type code, node HTML code, respectively*/4Console.log (h[i].tagname+ "| "+h[i].nodetype+" | "+h[i].outerhtml)5 if(H[i].tagname = = "TITLE"{//tagnmae matches everything in uppercase6h[i].innerhtml = "renamed"7 }8}
The results of the operation are as follows:
On the left is the HTML source structure, the right is the result of the operation, the first node of the actual node type code is 3, indicating that he is a text node (in fact, a newline ), the second node of the type code is 1, indicating that he is an HTML tag node, (the red arrow in the figure represents a text node, Yellow arrows indicate HTML tag nodes)
When we look at the HTML code as follows (write all the nodes in one line, there are no spaces and line breaks between the HTML nodes), then see the results of the operation:
Operation Result:
Found node only three, just three HTML tag nodes, so you can see that the ChildNodes lookup node is relatively strict, the space and newline are counted in the node, it will be the entire source code structure is traversed .
2. Children: It is not a standard property, it returns only the collection of HTML nodes for the child nodes of the specified element.
Or the first case of the above example, we will get the node collection by changing the way to Chrildren, other unchanged, see the result of the operation:
You can see the result it only saves the HTML node, not the rest of the text node interference.
==========
JS form validation processing and childnodes and children differences
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
