Question: How to verify the form immediately after input, instead of verifying it after submitting it is so inconvenient (the searches online are either ambiguous or incomplete...)
Method: In view of this, Xiaoke, Shuishanqi, complete the code, and add Xiaoke's personal understanding (notations) on it. It is only for latecomers to avoid detours. Please criticize and correct all kinds of heroes... (Please note the author, xiexie) - - table table form version, and there will be JQuery version in the future...
If it helps you, please give it a try (O)〃Ao~
screenshot:
Code:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>User registration</title><!-- The external css style is referenced here--><link rel="stylesheet" href="css/style.css" /> <script type="text/javascript"> //Timely verification of username function checkuse(){ //Defining the check variable in each function is to be able to verify whether each function passes one by one after the form is submitted, which is very good. (Same as follows) var check; var username = document.getElementById("username").value; if (username.length > 18 || username.length < 6) { alert("The username input is illegal, please re-enter!"); //This is very wonderful. Since you entered the wrong place here, then in theory, of course you have to continue entering here. (Continue to get focus here!) document.getElementById("username").focus(); check = false; } else { document.getElementById("checktext1").innerHTML = "* The username consists of 6-18-bit characters √"; check = true; } return check; } //Use regular expressions to determine whether the password meets function checkpwd() { var check; var reg = /[^A-Za-z0-9_]+/; var regs = /^[a-zA-Z0-9_/u4e00-/u9fa5] + $ /; var password = document.getElementById("password").value; if (password.length < 6 || password.length > 18 || regs.test(password)) { alert("Password input is illegal, please re-enter!"); document.getElementById("password").focus(); check = false; } else { document.getElementById("checktext2").innerHTML = "* Password consists of 6-18 characters and must contain letters, numbers and punctuation marks √"; check = true; } return check; } //Verify whether the password is inconsistent! function checkpwdc() { var check; var password = document.getElementById("password").value; var pwdc = document.getElementById("pwdc").value; if (password != pwdc) { alert("The password is inconsistent when the password is entered, please re-enter!"); document.getElementById("pwdc").focus(); check = false; } else { document.getElementById("checktext3").innerHTML = "* Please enter your password again √"; check = true; } return check; } //Verify user category when submitting function checkut(){ var check; if(document.getElementById("selUser").selectedIndex == 0) { alert("Please select user type!"); document.getElementById("selUser").focus(); check = false; }else{ document.getElementById("checktext4").innerHTML = "* Please select user type √"; check = true; } return check; } //Verify user gender when submitting function checkGender(){ var check; var gender = ""; //Get all tags with the name sex var sex = document.getElementsByName("sex"); //Transfer these tags with the name sex for(var i=0;i<sex.length;++i){ //If a sex is selected, record if(sex[i].checked) gender = sex[i].value; } if(gender == "") { alert("Please select gender!"); check = false; }else{ document.getElementById("checktext5").innerHTML = "* Please select your gender√"; check = true; } return check; } //Timely verify the date of birth function checkDate(){ var check; if(document.getElementById("txtDate").value ==""){ alert("Please fill in the date of birth!"); document.getElementById("txtDate").focus(); check = false; }else{ document.getElementById("checktext6").innerHTML = "* Please select your date of birth√"; check = true; } return check; } //Timely verify the interests and hobbies function checkHobby(){ var check; var hobby = 0; //objNum is all input tags with the name hobby var objNum = document.getElementsByName("hobby"); //Transfer all hobby tags for(var i=0;i<objNum.length;++i){ //Judge whether a hobby tag is selected if(objNum[i].checked==true) hobby++; } //If there is a selected hobby tag if(hobby >=1){ document.getElementById("checktext7").innerHTML = "* Please select your hobby √"; check = true; }else{ alert("Please fill in the hobby!"); check = false; } return check; } //regular expression verification email (timely) function checkmail(){ var check; //regular expression of email var e1 = document.getElementById("email").value.indexOf("@",0); var e2 = document.getElementById("email").value.indexOf(".",0); if(email == "" || (e1==-1 || e2==-1) || e2<e1 ) { alert("E_mail input error!"); document.getElementById("email").focus(); check = false; } else { document.getElementById("checktext8").innerHTML = "* Please fill in the commonly used EMAIL, which will be used to retrieve the password √"; check = true; } return check; } //Timely verification of self-introduction function checkintro(){ var check; var intro = document.getElementById("introduction").value; if (intro.length > 100) { alert("word count exceeds the limit!"); check = false; } else { document.getElementById("checktext9").innerHTML = "* Limited to 100 words"; document.getElementById("checktext9").focus(); check = true; } return check; } //All verifications are performed when submitting the form (if any verification fails, it will be returned to false to prevent the form submission) function check() { var check = checkuse() && checkpwd() && checkpwdc() && checkut() && checkGender() && checkDate() && checkHobby() && checkmail() &&checkintro(); return check; } </script></head><body ><!-- <form action ="Jump page" method ="get"|"post" name ="Form name" target ="Open with" enctype="multipart/form-data" > --><!-- onsubmit() function submits a form when the return value is true. --><form action="#" method="get" onsubmit="return check()" ><fieldset><legend> Small example of timely verification of form</legend><table align="left" style="background-image: url('img/4.jpg');" > <tr> <td>Username:</td> <td><input type="text" name="username" id="username" onchange="checkuse()" /></td> <td id="checktext1">* Username consists of 6-18 characters</td> </tr> <!-- onblur Event handler: Triggered when an element or window loses focus --> <!-- onchange Event handler: Triggered when a form element gets focus and the content changes --> <!-- The following is the same --> <tr> <td>Password:</td> <td><input type="password" name="password" id="password" onchange="checkpwd()" /></td> <td id="checktext2">* The password consists of 6-18 characters and must contain letters, numbers and punctuation marks</td> </tr> <tr> <td>Confirm password:</td> <td><input type="password" name="pwdc" id="pwdc" onchange="checkpwdc()" /></td> <td id="checktext3">* Please enter your password again</td> </tr> <tr> <td>User type: </td> <td> <select id="selUser" onblur="checkut()"> <option name="selUser" value="0">Please select</option> <option name="selUser" value="1">Admin</option> <option name="selUser" value="2">Ordinary user</option> </select> </td> <td id="checktext4">* Please select user type</td> </tr> <tr> <td>Gender: </td> <td> <input type="radio" value="1" name="sex" onchange="checkGender()"/> Male<input type="radio" value="2" name="sex" onchange="checkGender()"/> Female</td> <td id="checktext5">* Please select your gender</td> </tr> <tr> <td>Date of birth: </td> <td><input type="date" name="date" id="txtDate" onblur="checkDate()"/></td> <td id="checktext6">* Please select your date of birth</td> </tr> <tr> <td>Hosts: </td> <td> <input type="checkbox" name="hobby" value="reading" onchange="checkHobby()">Reading<input type="checkbox" name="hobby" value="music" onchange="checkHobby()">Music<input type="checkbox" name="hobby" value="sports" onchange="checkHobby()">Sports</td> <td id="checktext7">* Please select your hobbies</td> </tr> <ttr> <td>Email: </td> <td><input type="text" name="email" id="email" onchange="checkemail()"/></td> <td id="checktext8">* Please fill in the commonly used EMAIL, which will be used for password recovery</td> </tr> <tr> <td>Self-introduction: </td> <td><textarea cols="30" rows="3" name="introduction" id="introduction" onchange="checkintro()">This is a self-introduction...</textarea></td> <td id="checktext9">* Limited to 100 words</td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" name="submit" value="submit" /> <input type="reset" name="reset" value="reset" /> </td> </tr></table></fieldset></form></body></html>CSS style:
input:focus,textarea:focus{ border:1px solid #f00; background:#fcc; } textarea{ width:230px; height:50px; } body { font-size:15px; /* Font style*/ font-family:Microsoft YaHei; } select option{ font-size:10px; font-family:Microsoft YaHei; }The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.