Scribd
Upload
9 views

regex

Uploaded by

mraffay886
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

regex

Uploaded by

mraffay886
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

1.

Introduction to Form Validation

What is form validation?

Ensuring that user input is correct before submitting a form.

Why is it important?

Prevents incorrect, incomplete, or malicious data from being submitted.

2. What is Regex (Regular Expressions)?

Regex is a pattern used to match strings.

It helps validate inputs like emails, phone numbers, passwords, etc.

Example:

^[a-zA-Z]+$ → Matches letters only.

^\d{10}$ → Matches exactly 10 digits.

Keep this part brief to avoid overwhelming students.

3. Basic Syntax of Regex

^ → Start of the string

$ → End of the string

\d → Digit

\w → Alphanumeric

+ → One or more occurrences

{n} → Exactly n times


Present the HTML Code :

<!DOCTYPE html>

<title>Simple Validation</title>

</head>

<body>

<h1>Simple Form Validation</h1>

<!-- Email Validation -->

<h2>Email</h2>

<input type="text" id="email" placeholder="Enter email">

<button onclick="validateEmail()">Check Email</button>

<p id="emailResult"></p>

<!-- Phone Validation -->

<h2>Phone Number</h2>

<input type="text" id="phone" placeholder="Enter 10-digit phone">

<button onclick="validatePhone()">Check Phone</button>

<p id="phoneResult"></p>
<script>

// Email Validation

function validateEmail() {

const email = document.getElementById("email").value;

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

document.getElementById("emailResult").innerText =

emailRegex.test(email) ? "Valid Email" : "Invalid Email";

// Phone Number Validation

function validatePhone() {

const phone = document.getElementById("phone").value;

const phoneRegex = /^\d{10}$/;

document.getElementById("phoneResult").innerText =

phoneRegex.test(phone) ? "Valid Phone Number" : "Invalid Phone


Number";

</script>

</body></html>
Code Breakdown:

This code performs form validation for two inputs:

Email

Phone Number

We will explain each part step by step.

1. HTML Section

HTML creates the structure of the page. It has three parts:

1.Input boxes for the user to type information.

2.Buttons to check the input.

3.Paragraphs to show results (valid or invalid).

<!-- Email Validation -->

<h2>Email</h2>

<input type="text" id="email" placeholder="Enter email">

<button onclick="validateEmail()">Check Email</button>

<p id="emailResult"></p>

 <h2>: Displays a heading "Email".


 <input>: Creates a text box where the user can type an email.
 id="email" → This is used to identify the input box in JavaScript.
 placeholder="Enter email" → Shows a hint inside the box.
 <button>: A button that runs the validateEmail() function when clicked.
 onclick="validateEmail()" → Calls a JavaScript function.
 <p id="emailResult">: A paragraph where the result (Valid or Invalid) will be
shown.

2. JavaScript Section

JavaScript adds the functionality to check whether the input matches a pattern
(using Regex).

function validateEmail() {

const email = document.getElementById("email").value;

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

document.getElementById("emailResult").innerText =

emailRegex.test(email) ? "Valid Email" : "Invalid Email";

Step-by-Step Explanation

1.Get the email value:

1.document.getElementById("email").value gets the text typed in the email box.


2.Define the email pattern (Regex):

1.emailRegex is a pattern that checks if the input looks like an email.

2.Regex: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/

 ^[a-zA-Z0-9._%+-]+ → Starts with letters, numbers, or symbols like . or _.

 @ → Must have the @ symbol.

 [a-zA-Z0-9.-]+ → Domain name (e.g., gmail).

 \. → A dot (.) must appear.

 [a-zA-Z]{2,}$ → Ends with at least 2 letters (e.g., .com or .org).

3.Check the input:

emailRegex.test(email) checks if the input matches the pattern.

If true, show "Valid Email"; otherwise, show "Invalid Email".

4. Results Displayed
innerText: This shows the result (Valid or Invalid) inside the <p> tags.
For example:
If you type [email protected] in the email box and click "Check Email", it will show
"Valid Email".
5. Summary
HTML: Creates the input boxes, buttons, and result areas.
JavaScript: Checks if the input matches the correct pattern using Regex.
Regex: A pattern used to validate inputs like emails, phone numbers.

You might also like