OneCompiler

html

1761
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Customer Registration</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h2>Customer Registration</h2> <form id="registrationForm"> 
    <div class="form-group">
        <label for="customerName">Customer Name:</label>
        <input type="text" id="customerName" name="customerName" maxlength="50" required>
    </div>

    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </div>

    <div class="form-group">
        <label for="mobileCountryCode">Mobile Number:</label>
        <select id="mobileCountryCode" name="mobileCountryCode" required>
            <option value="+1">+1 (USA)</option>
            <option value="+91">+91 (India)</option>
            <option value="+44">+44 (UK)</option>
            

        </select>
        <input type="text" id="mobileNumber" name="mobileNumber" pattern="\d{10}" placeholder="10-digit number" required>
    </div>

    <div class="form-group">
        <label for="address">Address:</label>
        <input type="text" id="address" name="address" required>
    </div>

   
    <div class="form-group">
        <label for="customerID">Customer ID:</label>
        <input type="text" id="customerID" name="customerID" minlength="5" maxlength="20" required>
    </div>

    <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" minlength="8" maxlength="30" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\W).+" title="Must contain at least one uppercase letter, one lowercase letter, and one special character" required>
    </div>

    <div class="form-group">
        <label for="confirmPassword">Confirm Password:</label>
        <input type="password" id="confirmPassword" name="confirmPassword" minlength="8" maxlength="30" required>
    </div>

    
    <input type="submit" value="Register">
    <input type="reset" value="Reset">
</form>


<div id="successMessage" class="success-message"></div>
</div> <script> document.getElementById('registrationForm').addEventListener('submit', function(event) { event.preventDefault(); const password = document.getElementById('password').value; const confirmPassword = document.getElementById('confirmPassword').value; if (password !== confirmPassword) { alert('Passwords do not match!'); return; } const userID = 'USER' + Math.floor(Math.random() * 1000000); document.getElementById('successMessage').innerHTML = ` <p>Consumer Registration successful.</p> <p>Your User ID: <strong>${userID}</strong></p> `; }); </script> </body> </html>