This article example shares the specific code of js to implement the form verification function for your reference. The specific content is as follows 1. Three events used: onfocus (focus event), onblur (focus leaving event), onkeyup (key up event) 2. Use events to trigger functions and execute verification information in the functions. 3. Use checkform to determine whether the content in the form is standardized. If it is standardized, the submit button can submit the form information. Simple effect: Code in the form: <form action="demo.html" onsubmit="return checkForm()"> <div> <div class="text"> <p>Username</p> <input id="value" onfocus="shoeTips('hint','Username length cannot be less than six')" onblur="hint_hide()" onkeyup="hint()" type="text" Name="Userame" placeholder="Username" /> <span id="hint"></span> </div> <div class="text"> <p>Password</p> <input id="pass_value" onfocus="shoeTips('pass_hint','The password length cannot be less than six')" onblur="pass_hide()" onkeyup="checkPass()" type="password" name="password" placeholder="password" /> <span id="pass_hint"></span> </div> <div class="text"> <p>Confirm Password</p> <input id="passpass_value" onfocus="shoeTips('passpass_hint','The two passwords must be consistent')" onblur="passpass_hide()" onkeyup="checkPassPass()" type="password" name="password" placeholder="Confirm password" /> <span id="passpass_hint"></span> </div> <div class="text"> <p>Email</p> <input id="email" onfocus="shoeTips('email_hint','The email format must be correct')" onblur="emailHide()" onkeyup="emailCheck()" type="email" name="email" placeholder="Email" /> <span id="email_hint"></span> </div> <div class="text"> <p>Mobile phone number</p> <input id="phone" type="text" onfocus="shoeTips('phone_hint','A phone number in the format of eleven digits')" onblur="phoneHide()" onkeyup="phoneCheck()" Name="Phone" placeholder="Phone number"> <span id="phone_hint"></span> </div> <div class="submit"> <input type="submit" value="Submit" /> </div> </div> </form> In js: function shoeTips(spanId, tips) { var span = document.getElementById(spanId); span.innerHTML = tips; } /** * Verify username */ function hint() { var value = document.getElementById("value").value; var hint = document.getElementById("hint"); if(value.length < 6) { hint.innerHTML = "Username is too short"; return false; } else { hint.innerHTML = "Qualified Username"; return true; } } function hint_hide() { var hint = document.getElementById("hint"); hint.innerHTML = ""; } /** * Verify password */ function checkPass() { var value = document.getElementById("pass_value").value; var hint = document.getElementById("pass_hint"); if(value.length < 6) { hint.innerHTML = "The password is too short"; return false; } else { hint.innerHTML = "Password format is qualified"; return true; } } function pass_hide() { var hint = document.getElementById("pass_hint"); hint.innerHTML = ""; } /*** * Confirm password verification */ function checkPassPass() { var papavalue = document.getElementById("passpass_value").value; var value = document.getElementById("pass_value").value; var papahint = document.getElementById("passpass_hint"); if(papavalue != value) { papahint.innerHTML = "The two passwords do not match"; return false; } else { papahint.innerHTML = ""; return true; } } function passpass_hide() { var papahint = document.getElementById("passpass_hint"); papahint.innerHTML = ""; } /** * Verify email address */ function checkEmail(strEmail) { var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; if ( emailReg.test(strEmail) ) { return true; } else { // alert("The email address you entered is not in the correct format!"); return false; } }; function emailCheck() { var emailValue = document.getElementById("email").value; var email_hint = document.getElementById("email_hint"); var flag = checkEmail(emailValue); if(flag) { email_hint.innerHTML = "The email format is correct"; return true; } else { email_hint.innerHTML = "Email format error"; return false; } } function emailHide() { var email_hint = document.getElementById("email_hint"); email_hint.innerHTML = ""; } /** * Verify mobile phone number */ function checkMobile( strMobile ) { //13588888888 var regu = /^[1][345678][0-9]{9}$/; var re = new RegExp(regu); if (re.test(strMobile)) { return true; } else { return false; } }; function phoneCheck() { var phone = document.getElementById("phone").value; var phone_hint = document.getElementById("phone_hint"); var flag = checkMobile(phone); if(flag) { phone_hint.innerHTML = "The phone number format is correct"; return true; } else { phone_hint.innerHTML = "The phone number format is incorrect"; return false; } } function phoneHide() { var phone_hint = document.getElementById("phone_hint"); phone_hint.innerHTML = ""; } function checkForm() { var flag = emailCheck() && checkPass() && checkPassPass() && hint() && phoneCheck(); return flag; } The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Various problems and solutions in the process of deploying Tomcat to release projects on Linux
>>: MySQL stored procedure method example of returning multiple values
The one above shows the system time, and the one ...
Detailed example of getting the maximum value of ...
Table of contents 1. Software and system image 2....
Table of contents background 1. Document Descript...
If the developer uses Dockerfile to build the ima...
The method found on the Internet works The footer ...
The SQL JOIN clause is used to join rows from two...
Free points Interviewer : Have you ever used Linu...
Table of contents Foreign Key How to determine ta...
Translucent border Result: Implementation code: &...
Get a deep understanding of how the Linux configu...
1. Reasons If the system is Centos7.3, the Docker...
Click here to return to the 123WORDPRESS.COM HTML ...
This article shares the specific code for JavaScr...
Table of contents background question Problem ana...