Using JS to complete simple data verification
requirement analysis
Use JS to complete the simple data verification of the registration page. It is not allowed to leave the user name or password blank
technical analysis
from form property -- onsubmit must have a return value. If it is true, the submit is successful. If it is false, it cannot be submitted
JS method
. value: the value of the variable
. length: the length of the variable
. test(): verify the value in parentheses
regular expression
code implementation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
1. Confirmation event: form submission event onsubmit event
2. Function to be triggered by event: checkForm
3. Do something in function
1. Verify the user name. The user cannot be empty and the length cannot be less than 6 digits
1.Get the value entered by the user
*/
function checkForm(){
//Get user name entry
var inputObj = document.getElementById("username");
//Get the value of the input item
var uValue = inputObj.value;
// alert(uValue);
//User name length cannot be 6 bits ""
if(uValue.length < 6 ){
alert("I'm sorry,Your length is too short!");
return false;
}
//Password length greater than 6 and confirmation must be consistent
//Get the value entered in the password box
var input_password = document.getElementById("password");
var uPass = input_password.value;
if(uPass.length < 6){
alert("I'm sorry,You're still too short!");
return false;
}
//Get the value of the confirm password box
var input_repassword = document.getElementById("repassword");
var uRePass = input_repassword.value;
if(uPass != uRePass){
alert("I'm sorry,Two passwords are inconsistent!");
return false;
}
//Verify cell phone number
var input_mobile = document.getElementById("mobile");
var uMobile = input_mobile.value;
//
if(!/^[1][3578][0-9]{9}$/.test(uMobile)){
alert("I'm sorry,Your phone number is not recognized!");
return false;
}
//Verification email: / ^ ([a-za-z0-9] + @ ([a-za-z0-9] + (\. [a-za-z0-9])+/
var inputEmail = document.getElementById("email");
var uEmail = inputEmail.value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)){
alert("I'm sorry,Illegal email");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="JS Development steps.html" onsubmit="return checkForm()">
<div>user name:<input id="username" type="text" /></div>
<div>Password:<input id="password" type="password" /></div>
<div>Confirm password:<input id="repassword" type="password" /></div>
<div>phone number:<input id="mobile" type="number" /></div>
<div>mailbox:<input id="email" type="text" /></div>
<div><input type="submit" value="register" /></div>
</form>
</body>
</html>