javascript - 简单的 javascript 验证会阻止用户在输入无效日期格式时提交表单？

Question

我现在正在寻找这个问题很长一段时间，但没有得到足够好的答案。

jquery 验证引擎有缺陷，恕我直言。使用类属性来放置验证规则似乎是倒退的。

我想要一些超轻的东西:

显示一条小错误消息并阻止用户提交表单。

用户执行的错误如下。他用 Tab 键进入日期字段，然后手动输入错误的格式，然后提交表单。

See this fiddle

代码:

    <input id="first" type="text" value="" /> 
 <input id="hello" type="text" value="234.12.1984" />



$("#hello").datepicker();

$("#first").focus();

Answer 1

添加一条(最初隐藏的)错误消息(例如 ID“error”)并尝试如下操作:

$('form').submit(function(event){
    try{
        var d = $('#hello');
        $.datepicker.parseDate(d.datepicker( "option", "dateFormat" ), d.val());
    }catch(e){
        event.preventDefault();
        $('#error').show();
        return false;
    }
});

(当然可以用类/id 来说明哪种形式)。 Working fiddle

编辑

为了回应 OP 的评论，即接受日/月中缺少前导零的有效日期，我的建议只是修复此类日期。我认为这比在有效日期上抛出错误更用户友好。例如，将 try block 更改为

var format = d.datepicker( "option", "dateFormat" );
var tmp_date = $.datepicker.parseDate(format, d.val());
d.val( $.datepicker.formatDate(format, tmp_date) );

我有一个updated fiddle我还添加了额外的代码来记录将提交到控制台以显示它的数据(我向输入添加了一个名称，以便它提交数据)。