Simple data verification using JavaScript

Posted by guayaquil on Tue, 05 May 2020 18:15:24 +0200

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>
		<meta charset="UTF-8">
				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;
					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;
					alert("I'm sorry,Illegal email");
					return false;
				return true;
		<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>

Topics: Javascript Mobile less