& lt; ! DOCTYPE html>
<meta charset="utf-8" & gt;Form validation & lt;/title> <br/></head> <br/><body> <br/><style type="text/CSS" & gt; <br/>Span {color: red; <br/>The font - size: 0.75 rem; <br/>} <br/></style> <br/><The script type="text/javascript" & gt; <br/>Window. The onl oad=function () {<br/>Var usernameError=document. GetElementById (" usernameError "). The innerText <br/>Var passwordError=document. GetElementById (" passwordError "). The innerText <br/>Var password2Error=document. GetElementById (" password2Error "). The innerText <br/>Var emailError=document. GetElementById (" emailError "). The innerText <br/><br/>Var usernameElt=document. GetElementById (" username ")//get the user name box element <br/>Var username=usernameElt. Value//get the user name <br/>The username=username. The trim ()//remove the blank before and after the <br/>Var regExp=/^ [A Za - z0-9] + $/<br/>UsernameElt. Onblur=function () {<br/>If (username) {<br/>//user name is not empty <br/>If (username. Length<=6 | | username. Length> 14) {//verify the user name length legitimacy <br/>UsernameError="illegal user name length"//illegal user name length <br/>} <br/>Else if (regExp. Test (username) {<br/>//user name format legal <br/>The else {<br/>UsernameError="username format error" <br/>} <br/>} <br/>} else {<br/>UsernameError="user name cannot be empty" <br/>} <br/>} <br/>UsernameElt. An onfocus=function () {<br/>If (username==="") {<br/>The username=""//if the user name is whitespace, empty <br/>} <br/>UsernameError=""//clear error message <br/>} <br/>Var passwordElt=document. GetElementById (" password ")//get the password element <br/>Var password=passwordElt. Value//access password <br/>PasswordElt. Onblur=function () {//verification password <br/>If (password=="") {<br/>PasswordError="password cannot be empty" <br/>{} else if (password==username) <br/>PasswordError="with the user name password cannot repeat" <br/>} <br/><br/>} <br/>PasswordElt. An onfocus=function () {<br/>PasswordError=""//clear error message <br/><br/>} <br/>Var password2Elt=document. GetElementById (" password2)//obtain confirmation password box <br/>Var password2=password2Elt. Value//get confirmation password <br/>Password2Elt. Onblur=function () {<br/>If (password==password2) {<br/>//password <br/><br/>} else {<br/>Password2Error="passwords don't match" <br/>} <br/>} <br/>Password2Elt. An onfocus=function () {<br/>Password2Error=""//clear error message <br/>} <br/>Var emailElt=document. GetElementById (" email "),//obtain email box <br/>Var email=emailElt. Value//access email <br/>Var regExp2=/^ \ w + (\ w +/- +.]) * @ \ w + ([-] \ w +) * \ \ w + ([-] \ w +) * $///email regular expression <br/>EmailElt. Onblur=function () {<br/>If (email==="") {<br/>EmailError. The innerText="mail can't for empty" <br/>} else if (regExp2. Test (email)) {<br/>//email address legitimate <br/>} else {<br/>EmailError="email address illegal" <br/>} <br/><br/>} <br/>Document. The getElementById (" email "). An onfocus=function () {<br/>EmailError=""//clear error message <br/><br/>} <br/>Var register=document. GetElementById (" register ") <br/>Register. The onclick=function () {<br/>UsernameElt. Focus () <br/>UsernameElt. The blur () <br/><br/>PasswordElt. Focus () <br/>PasswordElt. The blur () <br/><br/>Password2Elt. Focus () <br/>Password2Elt. The blur () <br/><br/>EmailElt. Focus () <br/>EmailElt. The blur () <br/><br/>//trigger each text box <br/>} <br/>If ((usernameError=="" & amp; & PasswordError=="" & amp; & Password2Error=="") & amp; & EmailError="") {<br/>Document. The getElementById (" Form "). The submit () <br/>//submission form <br/><br/>} else {<br/>Alert (" the form content is wrong!" ) <br/>} <br/><br/>Var reset=document. GetElementById (" reset ") <br/>Reset the onclick=function () {<br/>The username="" <br/>Password="" <br/>Password2="" <br/>Email="" <br/><br/>} <br/><br/>} <br/><br/></script> <br/><! - general form submission by post, in order to detect with the get - so here & gt; <br/><The form action="new_file. The HTML" id="form" method="get" & gt; <br/>The user name & lt; Input type="text" id="username"/& gt; <Span id="usernameError" & gt; </span> <Br/& gt; <br/>Password & lt; Input type="password" id="password"/& gt; <Span id="passwordError" & gt; </span> <Br/& gt; <br/>Confirm password & lt; Input type="password" id="password2"/& gt; <Span id="password2Error" & gt; </span> <Br/& gt; <br/>Email & lt; Input type="text" id="email"/& gt; <Span id="emailError" & gt; </span> <Br/& gt; <br/><Input type="button" value="https://bbs.csdn.net/topics/" id="register"/& gt; <br/><Input type="button" value="https://bbs.csdn.net/topics/reset" id="reset"/& gt; <br/></form> <br/><br/><br/></body> <br/><br/></html> </pre><p class="article - content rp"> CodePudding user response: </p>Are some grammatical errors, such as: <br/><pre> <br/>Else if (regExp. Test (username) {<br/>//user name format legal <br/>The else {<br/>UsernameError="username format error" <br/>} <br/>} <br/></pre> <br/>The else cannot be nested in else if, and else if<p class="article - content rp"> CodePudding user response: </p><br/>I and a few changes to the code, there is something wrong with the trouble to help me see which <br/><br/><br/><pre> & lt; ! DOCTYPE html> <br/><Html> <br/><head> <br/><meta charset="utf-8" & gt; <br/><title> Form validation & lt;/title> <br/></head> <br/><body> <br/><style type="text/CSS" & gt; <br/>Span {color: red; <br/>The font - size: 0.75 rem; <br/>} <br/></style> <br/><The script type="text/javascript" & gt; <br/>Window. The onl oad=function () {<br/>Var usernameError=document. GetElementById (" usernameError "). The innerText <br/>Var passwordError=document. GetElementById (" passwordError "). The innerText <br/>Var password2Error=document. GetElementById (" password2Error "). The innerText <br/>nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull </div> <div class="th_page th_page_color"></div> <div class="umCopyright"> <p>Page link：<a href="/frontend/77475.html" target="_blank" style="color:#999">https//www.codepudding.com/frontend/77475.html</a></p> </div> <div class="detail-arr"> <div class="detail-arr-left">Prev:<a href='/frontend/77474.html'>A request under the guidance of the great god help</a></div> <div class="detail-arr-right">Next:<a href='/frontend/77476.html'>Vue dynamic access to data and used as a search box</a></div> </div> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="hot-tags neitags"> <ul> <li><i class="iconfont icon-x-tags"></i> Tags： </li> <a href='/e/tags/?tagname=JavaScript' target='_blank'>JavaScript</a> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="xiangguan"> <ul class="msg msghead"> <li class="tbname">Related</li> </ul> <ul> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="flinks"> <ul> <li><i class="iconfont icon-x-tags"></i> Links： </li> <li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li> </ul> </div> </div> </div> </div> <div class="footer"> <p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span> <a href="https://www.codepudding.com/contact.html">Contact Us</a> <a href="https://www.codepudding.com/service.html">Terms of Service</a> <a href="https://www.codepudding.com/privacy.html"> Privacy Policy</a></p> <p class="foot_info">Copyright © 2010-2023，Powered By <a href="/" target="_blank">CodePudding</a> </p> </div> <script type="text/javascript" src="/skin/code/tianhu.js"></script> </body></html>
