验证输入字段的特定结构

Posted 2023-05-09

【中文标题】验证输入字段的特定结构

【英文标题】：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 插件的问题，所以请不要这样标记它。已编辑。谢谢。

【参考方案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);
  
)

<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">

【讨论】：

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

【参考方案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')
     
    )
  );