Подтвердить спецификацию c структуры поля ввода - PullRequest
Новая
       88

Подтвердить спецификацию c структуры поля ввода

0 голосов
/ 24 февраля 2020

Мне действительно нужна помощь по этому вопросу ... У меня есть поле ввода, которое требует очень точной c проверки. это правила:

  1. это должно быть не более 5 символов (но может быть меньше)
  2. первые 4 символа должны быть только цифрами, пятый символ должен быть буквой.

Пока мне удалось проверить длину и проверить всю строку на наличие чисел. Что я не могу понять, так это как проверить только часть строки на наличие чисел (и текст другой части)

Вот код, который я использую: 

$(document).ready(function() {
    $('.input-text').on('change', function() { 
        if ($(this).val().length>5) {
            alert( 'Sorry... Maximum of 5 characters allowed' );
            var res = $(this).val().substring(0, 4);
            $(this).val(res);
        }

        if ( $(this).val() &&  !$(this).isNumeric ) {
            alert("Numbers Only Please");
            $(this).val('');
        }
    })
});

Заранее спасибо

Ответы [ 2 ]

1 голос
/ 24 февраля 2020

Один из вариантов - нарезать от 0-го до 3-го и 4-го символа из строки, а затем проверить, что первый соответствует ^\d*$ (все цифры), а последний символ, если он существует, соответствует [a-z] (в алфавитном порядке) ): 

$('.input-text').on('change', function() {
  const val = $(this).val();
  if (val.length > 5) {
    console.log('Sorry... Maximum of 5 characters allowed');
    $(this).val(val.slice(0, 4));
  }
  const firstFour = val.slice(0, 4);
  const fifth = val[4];
  if (!/^\d*$/.test(firstFour)) {
    console.log('First four must be numeric only');
    $(this).val('');
    return;
  }
  if (fifth && !/[a-z]/i.test(fifth)) {
    console.log('Fifth must be alphabetical');
    $(this).val(firstFour);
  }
})
<input class="input-text">

Можно также сделать это в одном регулярном выражении, но тогда вы не сможете разграничить различные виды проблем, которые могут возникнуть у ввода.

Кроме того, нет необходимости в jQuery для чего-то такого тривиального, вы можете удалить зависимость от него и , если хотите, чтобы синтаксис выглядел немного чище: 

document.querySelector('.input-text').addEventListener('change', function() {
  const val = this.value
  if (val.length > 5) {
    console.log('Sorry... Maximum of 5 characters allowed');
    this.value = val.slice(0, 4);
  }
  const firstFour = val.slice(0, 4);
  const fifth = val[4];
  if (!/^\d*$/.test(firstFour)) {
    console.log('First four must be numeric only');
    this.value = '';
    return;
  }
  if (fifth && !/[a-z]/i.test(fifth)) {
    console.log('Fifth must be alphabetical');
    this.value = firstFour;
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="input-text">
0 голосов
/ 24 февраля 2020

Вы можете сделать это .. 

$(document).ready(function() {
$('.input-text').on('change', function() { 
    if ($(this).val().length>5) {
        alert( 'Sorry... Maximum of 5 characters allowed' );
        var res = $(this).val().substring(0, 4);
        $(this).val(res);
    }

     var value2 = $(this).val().substr(0,4);

     if (value2 &&  !value2.isNumeric ) {
        alert("Numbers Only Please");
        $(this).val('');
     }

     var res = str.charAt(4)
     var key = res.keyCode;
     if (key >= 65 && key <= 90) {
        alert('Sorry... Please enter Last character alphabetically')
     }
    })
  });
...