The examples in this article share the verification code of the js implementation registration page for your reference. The specific content is as follows
Basic Operation
(): Get page elements
alert(): A prompt box pops up to the page.
innerHTML: Operate the content of an element of the page, which can be obtained or assigned.
(): Write content to the page.
This case realizes the basic verification function of the registration form, mainly implementing non-empty verification, repeated input verification, and email verification (regular verification), and gives users prompt information through the alert prompt dialog box. And block form submission when user input is illegal.
Steps analysis:
Step 1: Bind the event (onsubmit). Bind the onsubmit event for the form form and call a custom function.
Step 2: Write this function (get the data entered by the user <when obtaining the data, you need to define an id in the specified position>)
Step 3: Make judgments on the data entered by the user
Step 4: The data is legal (form submission)
Step 5: The data is illegal (given an error message and prevent form submission)
[Question] How to control form submission?
About event onsubmit: It is generally used for the position of form submission, so a return value needs to be given when defining the function. onsubmit = return checkForm()
Case implementation effect: When clicking the "Register" button, verify whether the input content in the form is legal. If it is not legal, a user prompt dialog box is given, and the form cannot be submitted.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function checkFrm() {
var usernameValue = ("username").value;
if(usernameValue == ""){
alert("Username cannot be empty");
return false;
}
var passwrodValue = ("password").value;
if(passwrodValue ==""){
alert("Password cannot be empty");
return false;
}
var emailValue = ("email").value;
var rule = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
if((emailValue)) {
alert("It is illegal to enter the email format!");
return false;
}
}
</script>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background-color: azure;
}
.rg_layout{
width:900px;
height: 500px;
margin: auto;
background-color: white;
border: 8px solid #EEEEEE;
margin-top:30px;
}
.rg_left {
border: 1px solid red;
width: 200px;
padding: 10px;
float: left;
}
.rg_center{
width:450px;
float: left;
}
.rg_right{
border: 1px solid red;
width: 200px;
float: right;
}
.td_left {
width:100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 15px;
}
#username,#password,#email,#tel ,#name,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid #A6A6;
border-radius: 5px;
padding-left: 10px;
}
#checkcode{
width: 110px;
}
#btn-sub{
width:150px;
height:40px;
background-color: #00CCFF;
border:1px solid #00CCFF;
border-radius: 5px;
}
#img_check{
height: 32px;
vertical-align: middle;//Center vertically }
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>New user registration</p>
<P>USER REGISTER</P>
</div>
<div class="rg_center">
<form action="#" method="get" onsubmit="return checkFrm()">
<table>
<tr>
<td class="td_left">
<label for="username">username：</label>
</td>
<td class="td_right">
<input type="text" name="username" placeholder="Please enter a username" >
</td>
</tr>
<tr>
<td class="td_left">
<label for="password">password：</label>
</td>
<td class="td_right">
<input type="password" name="password" placeholder="Please enter your password">
</td>
</tr>
<tr>
<td class="td_left">
<label for="email">Email：</label>
</td>
<td class="td_right">
<input type="email" name="email" >
</td>
</tr>
<tr>
<td class="td_left">
<label for="name">Name：</label>
</td>
<td class="td_right">
<input type="text" name="name" >
</td>
</tr>
<tr>
<td class="td_left">
<label for="tel">Phone number：</label>
</td>
<td class="td_right">
<input type="text" name="tel" >
</td>
</tr>
<tr>
<td class="td_left"><label >gender：</label></td>
<td class="td_right">
<input type="radio" name="gender" value="man">male
<input type="radio" name="gender" value="woman">female
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">Date of birth</label></td>
<td class="td_right">
<input type="date" name="birthday" >
</td>
</tr>
<tr>
<td class="td_left"><label for="checkcode">Verification code</label></td>
<td class="td_right">
<input type="text" name="checkcode" >
<img src="#" >
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="register" /></td>
</tr>
</table>
</form>
</div>
<div class="rg_right">
<P>Already have an account<a href="#" rel="external nofollow" >Login now</a></P> </div>
</div>
</body>
</html>The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.