验证输入字段的特定结构答案

【问题标题】：Validate specific structure of input field验证输入字段的特定结构
【发布时间】：2020-06-07 20:44:39
【问题描述】：

我真的需要这方面的帮助...我有一个需要非常具体的验证的输入字段。这些是规则：

最多只能有 5 个字符（但可以更少）
前 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('');
        }
    })
});

提前致谢

【问题讨论】：

这不是关于 jQuery Validate 插件的问题，所以请不要这样标记它。已编辑。谢谢。

标签： jquery validation input character string-length

【解决方案1】：

一个选项是从字符串中分割第 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);
  }
})

&lt;input class="input-text"&gt;

也可以在单个正则表达式中完成，但是您无法区分输入可能存在的不同类型的问题。

此外，对于这种微不足道的事情，不需要 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">

【讨论】：

漂亮干净的代码，工作起来就像一个魅力，荣誉

【解决方案2】：

你可以这样做..

$(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')
     }
    })
  });

【讨论】：