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
Effect picture: Implementation code: <template...
The following command is often used: chmod 777 文件...
This is what happened. Today I was playing with G...
Isolation of process address spaces is a notable ...
mysql 5.6.35 winx64 free installation version con...
Table of contents 1. Vue initialization vue entry...
1. Create a shell script vim backupdb.sh Create t...
Table of contents summary Environment and tool pr...
Just as the title says. The question is very stran...
See the effect first Implementation Code <div ...
1. scale() method Zoom refers to "reducing&q...
Translucent border Result: Implementation code: &...
Benefits of a programmatic approach 1. Global con...
This article shares the specific code of Element-...
Generate SSL Key and CSR file using OpenSSL To co...