US phone number with Cleave.js:

<!-- HTML -->
<input type="text" class="form-control" id="phone-mask" 
       placeholder="(555) 123-4567">

<!-- JavaScript -->
<script>
new Cleave('#phone-mask', {
    blocks: [0, 3, 3, 4],
    delimiters: ['(', ') ', '-'],
    numericOnly: true
});
</script>

Credit card input with automatic type detection:

new Cleave('#credit-card-mask', {
    creditCard: true,
    onCreditCardTypeChanged: function(type) {
        // Credit card type detected
    }
});

Date input with MM/DD/YYYY format:

new Cleave('#date-mask', {
    date: true,
    datePattern: ['m', 'd', 'Y']
});

Currency input with USD formatting:

new Cleave('#currency-mask', {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand',
    numeralDecimalMark: '.',
    numeralIntegerScale: 10,
    numeralDecimalScale: 2,
    prefix: '$'
});

Custom alphanumeric format (e.g., XXX-XXX-XXXX):

new Cleave('#custom-mask', {
    blocks: [3, 3, 4],
    uppercase: true,
    delimiter: '-'
});

Email validation with JavaScript:

const emailInput = document.getElementById('email-input');
const emailFeedback = document.getElementById('email-feedback');

emailInput.addEventListener('input', function() {
    const email = this.value;
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    
    if (email && !emailRegex.test(email)) {
        this.classList.add('is-invalid');
        emailFeedback.textContent = 'Please enter a valid email';
    } else {
        this.classList.remove('is-invalid');
    }
});