我正在尝试使用 javaScript 验证移动设备，但它不起作用

Question

I have a mobile and I want to check if the mobile number is less then 10 or greater then 13 then I want to show the message

My code:

<input name="mobile" id="mobile" placeholder="+91" class="form-control tboxs" type="text" style="font-family: 'JameelKhushkhatLRegular'">

<button style="width: 100%" type="button"  id="submit" value="submit" class="btn-theme-colored btn">SUBMIT <span class="glyphicon glyphicon-send">

        <script>
            $('#submit').click(function(){
       if($('#first_name').val() == '' ){
          alert('Name can not be left blank and atleast 4 char long');
          return false;
        }else if(!$("input[name='redio_gender']:checked").val()){
          alert('Please Select Gender');
          return false;   
        }else if($('#multiple').val( ) == '') {
          alert('Please Select Age');
          return false;
        }else if($('#profession').val( ) == '') {
          alert('Please Select your Profession');
          return false;
        }else if($('#taluka').val( ) == '') {
          alert('Please Select Taluka');
          return false;
        }else if($('#village').val( ) == '') {
          alert('Please Enter village');
          return false;  
        }else if($('#interest').val( ) == '') {
          alert('Please Select Area of Interest');
          return false;   
        }else if($('#masjid').val( ) == '') {
          alert('Please Enter Nearest Masjid');
          return false; 
        }else if($('#mobile').val( ) == '' || parseInt($('#mobile').val() < 10 )  ||  parseInt($('#mobile').val() > 13)) {
          alert('Please Enter Valid Mobile Number');
          return false;  
        }else{  
          $.ajax({
              --
              --
              });
       }
 });
        </script>

In the above code, I validate my code with javascript.

Answer 1

Try this :

var mob = '03311111111';

if( mob.length < 10 || mob.length > 13){
    // show error message
}

Answer 2

https://jqueryvalidation.org

      $.validator.addMethod(
        'phone',
        function (value, element, requiredValue) {
          var phoneRegexp = /^\+380\d{7,10}$/;
          return phoneRegexp.test(value);
        },
      );

      var validator = $('#form_id').validate({
              debug: true,
              errorClass: 'error-class',
              errorElement: 'div',
              rules: {
                  'phone': {
                      required: true,
                      phone: true,
                      minlength: 10,
                      maxlength: 13
                  }
              },
          }
      );

Answer 3

You can try the following:

$('#submit').click(function(){
    var mobile = $('#mobile').val();
    if(mobile.length < 10 || mobile.length > 13) {
        //mobile length is less than 10 or greater than 13, show error message
    }
});

Your final code would be this:

 <script>
       $('#submit').click(function(){

       var mobile = $('#mobile').val();

       if($('#first_name').val() == '' ){
          alert('Name can not be left blank and at least 4 char long');
          return false;
        } else if(!$("input[name='redio_gender']:checked").val()){
          alert('Please Select Gender');
          return false;   
        } else if($('#multiple').val( ) == '') {
          alert('Please Select Age');
          return false;
        } else if($('#profession').val( ) == '') {
          alert('Please Select your Profession');
          return false;
        } else if($('#taluka').val( ) == '') {
          alert('Please Select Taluka');
          return false;
        } else if($('#village').val( ) == '') {
          alert('Please Enter village');
          return false;  
        } else if($('#interest').val( ) == '') {
          alert('Please Select Area of Interest');
          return false;   
        } else if($('#masjid').val( ) == '') {
          alert('Please Enter Nearest Masjid');
          return false; 
        } else if(mobile.length < 10 || mobile.length > 13) {
          alert('Please Enter Valid Mobile Number');
          return false;  
        } else {  
          $.ajax({
              --
              --
              });
       }
 });
        </script>

Or you could use html attributes to do that by using minlength and maxlength on the text input and you may even want to switch the input type from text to tel

<input name="mobile" id="mobile" placeholder="+91" class="form-control tboxs" type="tel" style="font-family: 'JameelKhushkhatLRegular'" minlength='10' maxlength='13'>