日期输入自动格式化和防止字母字符

Posted 2023-05-08

【中文标题】日期输入自动格式化和防止字母字符

【英文标题】：Date Input Auto Format AND Prevent Alphabetic Characters

【发布时间】：2018-09-26 16:53:39

【问题描述】：

我需要一个包含两个不同部分的 html 表单。第一个是用户在输入中输入他们的出生日期，输入时会自动添加斜杠，并防止他们同时输入字母字符。我已经能够解决自动格式要求。为了解决第二部分，我一直在研究正则表达式，但可以找到任何不会同时破坏自动格式的东西。这是我的html：

<label for="date_of_birth">Date of Birth </label>
<input type="text"  name="dob" placeholder="MM/DD/YYYY" id="dob" pattern="^\\s*($1)\\W*($2)?\\W*($3)?([0-9]*).*" maxlength="10" class="validate"/>

这里是 jQuery：

var format = "mm/dd/yyyy";
     var match = new RegExp(format
         .replace(/(\w+)\W(\w+)\W(\w+)/, "^\\s*($1)\\W*($2)?\\W*($3)?([0-9]*).*")
         .replace(/m|d|y/g, "\\d"));
     var replace = "$1/$2/$3$4"
         .replace(/\//g, format.match(/\W/));

     function doFormat(target)
     
         target.value = target.value
             .replace(/(^|\W)(?=\d\W)/g, "$10")   // padding
             .replace(match, replace)             // fields
             .replace(/(\W)+/g, "$1");            // remove repeats
     

     $("input[name='dob']:first").keyup(function(e) 
        if(!e.ctrlKey && !e.metaKey && (e.keyCode == 32 || e.keyCode > 46))
           doFormat(e.target)
     );

这是一个小提琴： https://jsfiddle.net/4r15f951/2/

【问题讨论】：

Date Auto format with javascript的可能重复

【参考方案1】：

首先，您可以使用 jquery 屏蔽功能来做到这一点。

您需要从 html 输入中删除您的模式，并且该功能不是必需的。 相反，您可以使用

<label for="date_of_birth">Date of Birth </label>
<input type="text"  name="dob" placeholder="MM/DD/YYYY" id="dob"  maxlength="10" class="validate"/>

jQuery

  $('.validate').mask("99/99/9999");
     $('.validate').change(function()

    if($(this).val().substring(0,2) > 12 || $(this).val().substring(0,2) == "00") 
     alert("Iregular Month Format");
     return false;
    
     if($(this).val().substring(3,5) > 31 || $(this).val().substring(0,2) == "00") 
     alert("Iregular Date Format");
     return false;
    
      );

将此添加到您的脚本中 https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js

OnKeypress 本身的斜线会自动出现，并且字母的输入受到限制。

这是我的 jsfiddle：https://jsfiddle.net/0rw8rddf/

【讨论】：

这真的很有帮助。我想如果一个人未满 18 岁，我可以设置更多参数来引发错误？