javascript - How to do validation for 10 digit mobile number Using jQuery

Javascript - How to do validation for 10 digit mobile number Using jQuery

You can use jQuery along with regular expressions to validate a 10-digit mobile number. Here's an example:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mobile Number Validation</title> <!-- Include jQuery --> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> </head> <body> <label for="mobileNumber">Enter 10-digit Mobile Number:</label> <input type="text" id="mobileNumber"> <button id="validateButton">Validate</button> <div id="validationResult"></div> <script> $(document).ready(function() { $('#validateButton').click(function() { // Get the mobile number value var mobileNumber = $('#mobileNumber').val(); // Validate using a regular expression var mobileNumberRegex = /^\d{10}$/; if (mobileNumberRegex.test(mobileNumber)) { // Valid mobile number $('#validationResult').text('Valid Mobile Number'); } else { // Invalid mobile number $('#validationResult').text('Invalid Mobile Number'); } }); }); </script> </body> </html>

In this example:

  • The user enters a mobile number in the input field with the ID mobileNumber.
  • The jQuery click event for the button with the ID validateButton is triggered.
  • The JavaScript code gets the mobile number value from the input field.
  • It uses a regular expression (/^\d{10}$/) to check if the mobile number consists of exactly 10 digits.
  • The validation result is displayed in the validationResult element.

Examples

  1. "jQuery mobile number validation for 10 digits"

    • Code Implementation:
      <input type="text" id="mobileNumber"> <button onclick="validateMobileNumber()">Validate</button> <script> function validateMobileNumber() { var mobileNumber = $('#mobileNumber').val(); if (/^\d{10}$/.test(mobileNumber)) { alert('Valid mobile number!'); } else { alert('Invalid mobile number!'); } } </script>
    • Description: Use a regular expression (/^\d{10}$/) to check if the entered value is a 10-digit number.

  2. "jQuery validate Indian mobile number format"

    • Code Implementation:
      <input type="text" id="mobileNumber"> <button onclick="validateMobileNumber()">Validate</button> <script> function validateMobileNumber() { var mobileNumber = $('#mobileNumber').val(); if (/^[6-9]\d{9}$/.test(mobileNumber)) { alert('Valid Indian mobile number!'); } else { alert('Invalid mobile number!'); } } </script>
    • Description: Modify the regular expression (/^[6-9]\d{9}$/) to validate an Indian mobile number format.

  3. "jQuery validate 10 digit phone number"

    • Code Implementation:
      <input type="text" id="phoneNumber"> <button onclick="validatePhoneNumber()">Validate</button> <script> function validatePhoneNumber() { var phoneNumber = $('#phoneNumber').val(); if (/^\d{10}$/.test(phoneNumber)) { alert('Valid phone number!'); } else { alert('Invalid phone number!'); } } </script>
    • Description: Implement 10-digit phone number validation using the regular expression (/^\d{10}$/).

  4. "jQuery validate mobile number length"

    • Code Implementation:
      <input type="text" id="mobileNumber"> <button onclick="validateMobileNumber()">Validate</button> <script> function validateMobileNumber() { var mobileNumber = $('#mobileNumber').val(); if (mobileNumber.length === 10 && /^\d+$/.test(mobileNumber)) { alert('Valid mobile number!'); } else { alert('Invalid mobile number!'); } } </script>
    • Description: Check both the length and the numeric nature of the mobile number using jQuery.

  5. "jQuery validate mobile number with country code"

    • Code Implementation:
      <input type="text" id="mobileNumber"> <button onclick="validateMobileNumber()">Validate</button> <script> function validateMobileNumber() { var mobileNumber = $('#mobileNumber').val(); if (/^\+\d{1,3}-\d{10}$/.test(mobileNumber)) { alert('Valid mobile number with country code!'); } else { alert('Invalid mobile number!'); } } </script>
    • Description: Modify the regular expression (/^\+\d{1,3}-\d{10}$/) to validate a mobile number with a country code.

  6. "jQuery validate mobile number starting with 9"

    • Code Implementation:
      <input type="text" id="mobileNumber"> <button onclick="validateMobileNumber()">Validate</button> <script> function validateMobileNumber() { var mobileNumber = $('#mobileNumber').val(); if (/^9\d{9}$/.test(mobileNumber)) { alert('Valid mobile number starting with 9!'); } else { alert('Invalid mobile number!'); } } </script>
    • Description: Adjust the regular expression (/^9\d{9}$/) to validate mobile numbers starting with 9.

  7. "jQuery validate mobile number with or without country code"

    • Code Implementation:
      <input type="text" id="mobileNumber"> <button onclick="validateMobileNumber()">Validate</button> <script> function validateMobileNumber() { var mobileNumber = $('#mobileNumber').val(); if (/^(\+\d{1,3}-)?\d{10}$/.test(mobileNumber)) { alert('Valid mobile number with or without country code!'); } else { alert('Invalid mobile number!'); } } </script>
    • Description: Modify the regular expression (/^(\+\d{1,3}-)?\d{10}$/) to validate a mobile number with or without a country code.

  8. "jQuery validate mobile number format with dashes"

    • Code Implementation:
      <input type="text" id="mobileNumber"> <button onclick="validateMobileNumber()">Validate</button> <script> function validateMobileNumber() { var mobileNumber = $('#mobileNumber').val(); if (/^\d{3}-\d{3}-\d{4}$/.test(mobileNumber)) { alert('Valid mobile number with dashes!'); } else { alert('Invalid mobile number!'); } } </script>
    • Description: Modify the regular expression (/^\d{3}-\d{3}-\d{4}$/) to validate a mobile number with a specific format (e.g., 123-456-7890).

  9. "jQuery validate mobile number with optional parentheses"

    • Code Implementation:
      <input type="text" id="mobileNumber"> <button onclick="validateMobileNumber()">Validate</button> <script> function validateMobileNumber() { var mobileNumber = $('#mobileNumber').val(); if (/^(\(\d{3}\)-)?\d{7}$/.test(mobileNumber)) { alert('Valid mobile number with optional parentheses!'); } else { alert('Invalid mobile number!'); } } </script>
    • Description: Modify the regular expression (/^(\(\d{3}\)-)?\d{7}$/) to validate a mobile number with or without optional parentheses around the area code.

  10. "jQuery validate mobile number with spaces"

    • Code Implementation:
      <input type="text" id="mobileNumber"> <button onclick="validateMobileNumber()">Validate</button> <script> function validateMobileNumber() { var mobileNumber = $('#mobileNumber').val(); if (/^\d{3} \d{3} \d{4}$/.test(mobileNumber)) { alert('Valid mobile number with spaces!'); } else { alert('Invalid mobile number!'); } } </script>
    • Description: Modify the regular expression (/^\d{3} \d{3} \d{4}$/) to validate a mobile number with spaces (e.g., 123 456 7890).

More Tags

micro-frontend human-readable perl flex-lexer logic index-error pymssql openshift drupal-contact-form signal-processing

More Programming Questions

More Statistics Calculators

More Bio laboratory Calculators

More Everyday Utility Calculators

More Other animals Calculators