Question

我现在正在寻找这个，但是没有得到足够好的答案。

jquery验证引擎存在缺陷。使用class属性放置验证规则似乎是倒退。

我想要超轻量级的东西：

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

用户所犯的错误如下。他选中日期字段，然后手动输入错误的格式，然后提交表单。

代码：

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



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

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

Answer 1

<强> Working Fiddle

<input type="text" class="date" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="using pattern" title="dd/mm/yyyy or mm/dd/yyyy"/>

它识别的唯一模式是dd/mm/yyyy or mm/dd/yyyy

<强>更新
This answer 可能会对您有所帮助。

希望它有帮助..！

Answer 2

添加（最初隐藏的）错误消息（例如ID＆＃34;错误＆＃34;）并尝试如下内容：

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

（也许用class / id来表示当然是哪种形式）。 Working fiddle

修改

为了回应OP的评论，当天接受了有效日期错过了日期/月份的前导零，我的建议只是修复这些日期。我认为它比在有效日期抛出错误更加用户友好。例如，将try块更改为

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

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

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

2 个答案: