Two Implementation Methods of JavaScript Form Verification
- 2021-07-18 07:03:08
- OfStack
In this paper, we share the implementation method of js form verification for your reference. The specific contents are as follows
Type 1: js form validation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Registration - Individual users </title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
<style>
body {
font-family: Arial, " Song Style ", Lucida, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #333;
line-height: 150%;
background: #f2f2f2;
}
.hide{display:none;}
.focus,.error {
color: #e4393c;
line-height: 36px;
height: 36px;
position: absolute;
top: 0px;
width: 260px;
padding: 0 5px;
background: #FFEBEB;
border: 1px solid #ffbdbe;
}
.error span,.focus span {
padding: 5px 0;
line-height: 13px;
display: block;
}
.focus {
color: #666;
width: 260px;;
line-height: 36px;
background: #f7f7f7;
border: 1px solid #dddddd;
}
.regist {
width: 990px;
padding: 0;
margin: 0 auto;
zoom: 1;
}
.mc {
padding: 30px 0 20px;
border: solid #dddddd; border-width : 0px 1px 1px;
background: #FFF;
overflow: hidden;
zoom: 1;
border-width: 0px 1px 1px;
}
.form {
float: left;
width: 750px;
font-size: 12px;
}
.form label,.form input,.form select,.form textarea,.form button,.form .label {
float: left;
font-size: 12px;
}
.item {
padding-top: 9px;
height: 60px;
line-height: 34px;
position: relative;
z-index: 1;
}
.label {
float: left;
width: 190px;
text-align: right;
font-size: 14px;
color: #999;
padding-right: 10px;
}
.input {
float: left;
position: relative;
width: 270px;
overflow: visible;
}
.text {
float: none;
width: 275px;
height: 37px;
line-height: 32px;
border: 1px solid #cccccc;
font-size: 14px;
font-family: arial, " Song Style ";
overflow: hidden;
}
</style>
</head>
<body>
<div class="regist">
<div class="mc">
<form id="personRegForm" class="form" action="login.html" method="POST" onsubmit="return validateForm();">
<div class="item">
<span class="label"> User name: </span>
<div class="input">
<input type="text" id="username" name="username" class="text">
<label id="username_msg" class="hide"></label>
</div>
</div>
<div class="item">
<span class="label"> Please set the password: </span>
<div class="input">
<input type="password" id="password" name="password" class="text">
<label id="pwd_msg" class="hide"></label>
</div>
</div>
<div class="item">
<span class="label"> Please confirm the password: </span>
<div class="input">
<input type="password" id="pwdRepeat" name="pwdRepeat" class="text">
<label id="pwdRepeat_msg" class="hide"></label>
</div>
</div>
<div class="item">
<span class="label"> Verify mailbox: </span>
<div class="input">
<input type="text" id="mail" name="mail" class="text">
<label id="mail_msg" class="hide"></label>
</div>
</div>
<div class="item">
<span class="label"> </span>
<input type="submit" class="btn-img" id="registsubmit" value=" Register now " />
</div>
</form>
</div>
</div>
<script>
window.onload = function(){
// 1. User name
$("#username").focus(function(){
/* Get the focus
var username_msg = $("#username_msg");
username_msg.text("4-20 Bit characters, English, numeric and '-' , '_' Combination ");
username_msg.attr("class","focus");
*/
elemFocus("username_msg","4-20 Bit characters, English, numeric and '-' , '_' Combination ");
}).blur(userValidator);
// 2. Password
$("#password").focus(function(){
elemFocus("pwd_msg","6-20 Bit characters, which can use a combination of letters and numbers ");
}).blur(pwdValidator);
// 3. Confirm password
$("#pwdRepeat").focus(function(){
elemFocus("pwdRepeat_msg","6-20 Bit characters, which can use a combination of letters and numbers ");
}).blur(pwdRepeatValidator);
// 4. Email
$("#mail").focus(function(){
elemFocus("mail_msg"," After authentication, you can use this mailbox to log in and retrieve your password ");
}).blur(emailValidator);
}
// Definition function - General information prompt
function elemFocus(eleId,text){
var ele_msg = $("#"+eleId);
ele_msg.text(text);
ele_msg.attr("class","focus");
}
// Define functions to validate user names
function userValidator(){
// Gets the value entered for the user name
var value = $("#username").val();
// Gets the element used to display prompt information
var username_msg = $("#username_msg");
// Verification logic
if(value==""||value==null){
username_msg.text(" User name cannot be empty ");
username_msg.attr("class","error");
return false;
}else if(value.length<4||value.length>20){
username_msg.text(" The length of the user name is incorrect ");
username_msg.attr("class","error");
return false;
}else if(!/^[a-zA-Z0-9-_]{4,20}$/.test(value)){
username_msg.text(" Incorrect user name input ");
username_msg.attr("class","error");
return false;
}
// Verify that by modifying the correct style,
if(!username_msg.hasClass("hide")){
username_msg.text("");
username_msg.attr("class","hide");
}
return true;
}
// Define functions to verify passwords
function pwdValidator(){
var value = $("#password").val();
var pwd_msg = $("#pwd_msg");
if(value==""||value==null){
pwd_msg.text(" Password cannot be empty ");
pwd_msg.attr("class","error");
return false;
}else if(value.length<6||value.length>20){
pwd_msg.text(" The length of the password is incorrect ");
pwd_msg.attr("class","error");
return false;
}else if(!/^[a-zA-Z0-9]{6,20}$/.test(value)){
pwd_msg.text(" Incorrect password input ");
pwd_msg.attr("class","error");
return false;
}
if(!pwd_msg.hasClass("hide")){
pwd_msg.text("");
pwd_msg.attr("class","hide");
}
return true;
}
// Define functions that confirm password authentication
function pwdRepeatValidator(){
var value = $("#pwdRepeat").val();
var pwdRepeat_msg = $("#pwdRepeat_msg");
var pwd = $("#password").val();
if(value==""||value==null){
pwdRepeat_msg.text(" Password cannot be empty ");
pwdRepeat_msg.attr("class","error");
return false;
}else if(value.length<6||value.length>20){
pwdRepeat_msg.text(" The length of the password is incorrect ");
pwdRepeat_msg.attr("class","error");
return false;
}else if(!/^[a-zA-Z0-9]{6,20}$/.test(value)){
pwdRepeat_msg.text(" Incorrect password input ");
pwdRepeat_msg.attr("class","error");
return false;
}else if(value != pwd){
pwdRepeat_msg.text(" Enter the password twice. No 1 To ");
pwdRepeat_msg.attr("class","error");
return false;
}
if(!pwdRepeat_msg.hasClass("hide")){
pwdRepeat_msg.text("");
pwdRepeat_msg.attr("class","hide");
}
return true;
}
// Definition Email Validated function
function emailValidator(){
var value = $("#mail").val();
var email_msg = $("#mail_msg");
if(value==""||value==null){
email_msg.text("Email Cannot be empty ");
email_msg.attr("class","error");
return false;
}else if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)){
email_msg.text("Email Incorrect format ");
email_msg.attr("class","error");
return false;
}
if(!email_msg.hasClass("hide")){
email_msg.text("");
email_msg.attr("class","hide");
}
return true;
}
function validateForm(){
if(!userValidator()||!pwdValidator()||!pwdRepeatValidator()||!emailValidator()){
return false;
}
return true;
}
</script>
</body>
</html>
Type 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
form {
width: 570px;
height: 300px;
margin: 100px auto;
}
label {
width: 64px;
float: left;
clear: left;
height: 36px;
line-height: 36px;
margin-top: 10px;
}
input {
width: 300px;
height: 36px;
line-height: 36px;
margin-top: 10px;
text-indent: 8px;
font-size: 16px;
font-family: " Microsoft Yahei ";
border: 1px solid #ccc;
float: left;
}
#sub {
width: 302px;
height: 40px;
border: 1px solid #ccc;
background: #888;
color: #fff;
font-size: 18px;
text-indent: 0;
}
.spa {
height: 36px;
line-height: 36px;
width: 204px;
display: inline-block;
float: left;
font-size: 12px;
color: #BD362F;
text-indent: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<form action="" method="post">
<label id="name"> Last name Name: </label><input type="text" name="username" id="username" value="" placeholder=" Please enter a name " /><span class="spa spa1"></span><br />
<label id="phone"> Mobile phone number: </label><input type="text" name="userphone" id="userphone" value="" placeholder=" Please enter your mobile phone number " /><span class="spa spa2"></span><br />
<label id="address"> Ground Address: </label><input type="text" name="useraddress" id="useraddress" value="" placeholder=" Please enter the address " /><span class="spa spa3"></span><br />
<label> </label><input type="submit" value=" Registration " id="sub" />
</form>
<script src="http://code.jquery.com/jquery-1.4.1.js"></script>
<script type="text/javascript">
window.onload = function() {
$("#username").focus()
}
/************************ Defocus judgment **********************************/
$("input").blur(function() {
$(".spa").css("color", "#BD362F")
if($(this).is("#username")) { // Name judgment
var na = /^[\u4E00-\u9FA5]{2,4}$/
if($("#username").val() != "") {
if(!(na.test($("#username").val()))) {
$(".spa1").text(" Please enter 2-4 Chinese characters ");
$(this).css("border", "1px solid #BD362F")
return false;
} else if(na) {
$(".spa1").text("");
return true;
}
} else {
$(".spa1").text("");
}
}
if($(this).is("#userphone")) { // Mobile phone number judgment
var ph = /^1[3|5|7|8|][0-9]{9}$/
if($("#userphone").val() != "") {
if(!(ph.test($("#userphone").val()))) {
$(".spa2").text(" Please enter the correct mobile phone number ");
$(this).css("border", "1px solid #BD362F")
return false;
} else if(ph) {
$(".spa2").text("");
return true;
}
} else {
$(".spa2").text("");
}
}
if($(this).is("#useraddress")) { // Address determination
var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/;
if($("#useraddress").val() != "") {
if(!(ad.test($("#useraddress").val()))) {
$(".spa3").text(" Please enter the correct address ");
$(this).css("border", "1px solid #BD362F")
return false;
} else if(ad) {
$(".spa3").text("");
return true;
}
} else {
$(".spa3").text("");
}
}
})
/********************** Focus hint ************************/
$("input").focus(function() {
if($(this).is("#username")) {
$(".spa1").text("4 Chinese characters ").css("color", "#aaa")
$(this).css("border", "1px solid #aaa")
}
if($(this).is("#userphone")) {
$(".spa2").text("11 Bit mobile phone number ").css("color", "#aaa")
$(this).css("border", "1px solid #aaa")
}
if($(this).is("#useraddress")) {
$(".spa3").text(" Minimum 8 Characters (Chinese characters, letters and numbers) ").css("color", "#aaa")
$(this).css("border", "1px solid #aaa")
}
})
/*********************** Submit validation ***************************/
$("#sub").click(function() {
var na = /^[\u4E00-\u9FA5]{2,4}$/; // Name regularity
var ph = /^1[3|5|7|8|][0-9]{9}$/; // Regular mobile phone number
var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/; // Address regularity
if(na.test($("#username").val()) && ph.test($("#userphone").val()) && ad.test($("#useraddress").val())) {
return true;
} else {
if($("#username").val() == "") {
$(".spa1").text(' Please fill in the user name ')
}
if($("#userphone").val() == "") {
$(".spa2").text(' Please fill in your mobile phone number ')
}
if($("#useraddress").val() == "") {
$(".spa3").text(' Please fill in the address ')
}
return false;
}
})
</script>
</body>
</html>