"HTML 电话号码验证"

Question

I am working on an HTML website and I am a little stuck in one situation.

The client wants to add phone numerical numbers only, without alphabetic characters with the condition that the phone number field should be accepted and submit phone number if someone enters +91 in front of 10 digit phone number (ie +917894561236) and if he didn't add +91 the field should also accept 10 digit phone number but not less than 10 numbers.

Here is my html:

<div class="form-group">
  <label for="">Phone number *</label>
  <input type="text" class="form-control" minlength=10 required name="phone_m" id="phoned"
         placeholder="Enter Your Phone Number" pattern="^(\+91[\-\s]?)?[0]?(91)?[6789]\d{9}$"
         oninput="if (typeof this.reportValidity === 'function') {this.reportValidity();}" / >
</div>

The below jQuery script is used to remove alphabets from phone field, however adding type="tel" in input field dosn't stop users to type alphabets

<script>
//to get only numeric values in phone number field
jQuery('#phoned').keyup(function () { 
    this.value = this.value.replace(/[^0-9+\.-]/g, '');
});
</script>

Answer 1

I am working on an HTML website and I am a little stuck in one situation.

The client wants to add phone numerical numbers only, without alphabetic characters with the condition that the phone number field should be accepted and submit phone number if someone enters +91 in front of 10 digit phone number (ie +917894561236) and if he didn't add +91 the field should also accept 10 digit phone number but not less than 10 numbers.

Here is my html:

<div class="form-group">
  <label for="">Phone number *</label>
  <input type="text" class="form-control" minlength=10 required name="phone_m" id="phoned"
         placeholder="Enter Your Phone Number" pattern="^(\+91[\-\s]?)?[0]?(91)?[6789]\d{9}$"
         oninput="if (typeof this.reportValidity === 'function') {this.reportValidity();}" / >
</div>

The below jQuery script is used to remove alphabets from phone field, however adding type="tel" in input field dosn't stop users to type alphabets

<script>
//to get only numeric values in phone number field
jQuery('#phoned').keyup(function () { 
    this.value = this.value.replace(/[^0-9+\.-]/g, '');
});
</script>

Answer 2

I am working on an HTML website and I am a little stuck in one situation.

The client wants to add phone numerical numbers only, without alphabetic characters with the condition that the phone number field should be accepted and submit phone number if someone enters +91 in front of 10 digit phone number (ie +917894561236) and if he didn't add +91 the field should also accept 10 digit phone number but not less than 10 numbers.

Here is my html:

<div class="form-group">
  <label for="">Phone number *</label>
  <input type="text" class="form-control" minlength=10 required name="phone_m" id="phoned"
         placeholder="Enter Your Phone Number" pattern="^(\+91[\-\s]?)?[0]?(91)?[6789]\d{9}$"
         oninput="if (typeof this.reportValidity === 'function') {this.reportValidity();}" / >
</div>

The below jQuery script is used to remove alphabets from phone field, however adding type="tel" in input field dosn't stop users to type alphabets

<script>
//to get only numeric values in phone number field
jQuery('#phoned').keyup(function () { 
    this.value = this.value.replace(/[^0-9+\.-]/g, '');
});
</script>

Answer 3

I wrote and used this function for my client, it formats while they type it, and actually check if the char entered is numerical, trims the lenght as well. Well the format they wanted is "XXX-XXX-XXXX" but I am sure you can mod my code to suite your needs. The regex is not perfect but if they copy and past s*** it will stop them from submitting.