StackBits

Buttons

Animated Gradient Button

Copy Button

Hold Button

Toggle Button

Moving Border Button

Navigation Button

Pagination Button

Random Button

Shine Button

Backgrounds

Glowing Dots Background

Prismatic Haze Background

Proximity Background

Space Travel

Wavy Background

Texts

Blur Text

Bounce In Text

Dotted Text

Glitch Text

Gooey Words

Hidden Text

Pixelated Text

Rainbow Text

Sentence Flip

Wavy Text

Utilities

Axios Interceptor

Custom Logger

Dark & Light Theme

Debounce

Encryption Decryption

Express Server

Regex Validations

Yup Validations

Regex Validations

Regular expressions are powerful tools for validating input formats efficiently. This section provides a collection of commonly used regex patterns and utility functions to ensure data integrity and prevent incorrect user inputs.

1. Email Validation

const validateEmail = (email: string): boolean => {
    const regex = /^[w-.]+@([w-]+.)+[w-]{2,4}$/;
    return regex.test(email);
}

Test Email

2. Mobile Number Validation

// * Number should be atleast 7 digits long and shorter than 16 digit s
const validateMobileNumber = (mobile: string): boolean => {
    const regex = /^+?[1-9]d{6,14}$/;
    return regex.test(mobile);
}

Test Number

3. Password Validation

// * Password should be atleast 6 characters long and 
// * should contain atleast one uppercase letter, one 
// * lowercase letter and one special character
const validatePassword = (password: string): boolean => {
    const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*W).{6,}$/;
    return regex.test(password);
}

Test Password

4. URL Validation

const validateURL = (url: string): boolean => {
    const regex = /^(https?://)?([w.-]+).([a-z]{2,6})([/w .-]*)*/?$/i;
    return regex.test(url);
}

Test URL

5. Postal Code Validation

const validatePinCode = (pin: string): boolean => {
    const regex = /^d{6}$/; // Supports 6 digit PIN codes
    return regex.test(pin);
}

Test Pincode

6. Credit Card Validation

// * Credit Card number should contain 16 digits
// * Number can be in the following formats:
// * XXXX-XXXX-XXXX-XXXX or XXXXXXXXXXXXXXXX or XXXX XXXX XXXX XXXX
const validateCreditCard = (cardNumber: string): boolean => {
    const regex = /^(d{4}[- ]?){3}d{4}|d{16}$/;
    return regex.test(cardNumber);
}

Test Credit Card