- Three ways to use <script></script>:
- Put in the <body>
- Put in the
- Placed in an external JS file
- Three ways to output data:
- Use the document.write () method to write content to an HTML document.
- Use the Window.alert () pop-up warning box.
- Writes to an HTML element using InnerHTML.
- Use the ID property to identify the HTML element.
- Use the document.getElementById (ID) method to access HTML elements.
- Use innerHTML to get or insert element content.
- The login page prepares:
- Add an Error prompt box.
- Write a good html+css file.
- Set the ID of each INPUT element
- Defines a JavaScript function.
- Verify user name 6-20-bit
- Verify password 6-20-bit
- The onclick invokes this function.
<! DOCTYPE html>"en">"UTF-8"> <title> time </title> <script type="Text/javascript"Src=".. /static/js2.js"></script>document.write (Date ())</script> <p></p><button type="Button"Onclick=window.alert ("user name cannot start with a number") > Login </button></body><! DOCTYPE html>"en">"UTF-8"> <title> Guangzhou Business School </title>"Demo">hello world!</p> <script>document.getElementById ("Demo"). innerhtml=Date (); </script><button type="Button"Onclick=window.alert ("An error occurred on the access page") > Login </button></body></body>
<! DOCTYPE html>"en">"UTF-8"> <title>login</title> <link href=".. /static/css/login.css"Rel="stylesheet"Type="Text/css"> <script>function Fnlogin () {var ouname= document.getElementById ("uname") var oerror= document.getElementById ("Error_box") var oupass= document.getElementById ("UPass") if(ouname.value.length<6) {oerror.innerhtml="user name is at least 6 bits" } if(ouname.value.length>20) {oerror.innerhtml="user name must not exceed 20 digits" } if(ouname.value.length>6&ouname.value.length<20&oupass.value.length<6) {oerror.innerhtml="password is at least 6 bits" } if(ouname.value.length>6&ouname.value.length<20&oupass.value.length>20) {oerror.innerhtml="password must not exceed 20 digits" } } </script>class="Flex-container"> <divclass="Box"> <div id="Container"style="width:400px"> <div id="Header"style="Background-color:pink"><H2 align="Center"style="margin-bottom:0;">Login"content"style="Background-color:hotpink;height:150px;width:400px;float:left;"align="Center"> <divclass="Input_box">username:<input id='uname'Type="text"Placeholder="Please input username"></div> <divclass="Input_box">password:<input id='UPass'Type="Password"Placeholder="Please input password"></div><br> <div id="Error_box"><br></div> <divclass="Input_box"> <divclass="Input_box"><button onclick="Fnlogin ()">login</button> <button Onclick=window.alert ("Cancel will not save changes") >cancle</button></div> <div id="Footer"style="Background-color:pink;clear:both;text-align:center;"> duym</div> </div> <br> </div></div></body>JavaScript Basics, Login front-end verification