Question

我需要使用javascript执行输入框模式的检查。我需要这样做的原因是，每次在输入框中更改某些内容时，都会通过ajax提交表单。因此必须延迟，必须执行检查，如果不正确，则必须停止ajax进程。这一切都很好，除了，如何触发模式属性？显然没有使用提交。

HTML

<input type="text" pattern="\d{1,2}/\d{1,2}/\d{4}" />

修改

我想要懒惰而不是重新实现模式。例如。我想免费获得这个

enter image description here

See in this fiddle

这条好消息包含在输入框的title属性中，当用户尝试提交与模式不匹配的内容时，显然可以很好地显示。

有人问我出于某种原因我不明白ajax片段。 btw handleUTF8Decode.php正在解决一个字符集问题，然后包括实际的页面。你去了：

 $.ajax({
            type: "post",
            url: "/mycompany/handleUTF8Decode.php",
            data: jform.serialize(),
            dataType: 'html',
            async: true,
            beforeSend: function () {
                $("#ajax-status").html("Processing");
            },
            success: function (data) {
            },
            error: function (xhr, status, error) {
                $("#ajax-status").html("ERROR " + "<div class='ajaxResponse'>"+data+"</div>" );
            }
        });

Answer 1

pattern无所事事＆＃34;触发＆＃34;。您只需检查相关元素的validity：

jform.find("input[pattern]").prop("validity").patternMismatch // boolean

Answer 2

更新了答案

回应OP的评论......

我在一个漫长的工作日结束时很快就把它扔到了一起，所以我为这个憔悴的人道歉。可以在JS Bin找到完整的工作示例（包含大量注释）。此示例显示了如何将jQuery UI的datepicker和tooltip小部件与输入字段的标准oninput事件结合使用，以创建一个客户端的动态字段 - 无需提交表单数据即可进行表单验证。

我意识到这可能不是最优雅的方式，但这是我在本论坛中没有看到过的一个选项。 然后，这可能是一个很好的理由...

然而，在这里快速浏览一下框架 - 要在“动作”中查看它，您可以查看其JS Bin page。 请原谅格式化，我现在对CSS太懒了。

// I've gone ahead and removed most of the code and notes for
// brevity. See: [http://jsbin.com/wuyum/1/edit?js,output]
$(function () {
    // Internal function used to incrementally validate the user's
    // input (valid for both mm/dd/yyyy & dd/mm/yyyy formats).
    function validateInput(contents) {
        var rgx = /^(\d{1,2}(?:\/(?:\d{1,2}(?:\/(?:\d{1,4})?)?)?)?)$/;
        return rgx.test(contents);
    };

    // Internal function used to check a valid date format against
    // a valid date (e.g. 99/99/2014 is not a valid date).
    function checkDate(date) {
        return !isNaN(new Date(date).getDate());
    };

    // Create a new datepicker object and use its onSelect event to
    // run through your AJAX call...
    $('#date').datepicker({
        // onSelect will be called when the user either selects a date
        // from the widget, or uses the Return/Enter key on submission.
        onSelect: function (date) {
            // By now the date has already been validated, client-side,
            // in two-part. First the RegEx matched a mm/dd/yyyy format
            // and then we confirmed that the date wasn't erroneous with
            // checkDate(). If the user submitted an invalid date (say
            // '44/44') the widget will automatically reset the date to
            // 'today'. Alternatively, you could call checkDate() again
            // during this event -- that's really your call.

            // Execute your AJAX call
            // $.ajax() ...
        }
    }).tooltip({
        // Define a non-delegated tooltip to use as a prompt...
    }).on('input', function () {
        // Handle the forms RegExp and format validation here...
    });
});

值得注意的是datepicker的默认格式为mm/dd/yyyy。这可以很容易地更改，但是应该警告您，如果您的目标是为用户提供输入mm/dd/yyyy或dd/mm/yyyy的选项，则会遇到一些问题，除非首先使用格式验证正在使用。例如：

10/06/2014 --> October 6th 2014 (mm/dd/yyyy)
10/06/2014 --> June 10th 2014 (dd/mm/yyyy)

希望这对你有所帮助。

原始答案

从您的RegEx模式看，您似乎尝试根据标准日期格式mm/dd/yyyy验证字段。

如果是这种情况，并且您想要对字段的每次更改验证格式，我建议使用jQuery UI和Datepicker小部件 - 利用datepicker s onSelect事件。像这样：

// where #date is the id of <input id="date" type="text"/>
$('#date').datepicker({
    onSelect: function(date) {
        // $.ajax() here
    }
});

或者，您可以在input字段的onchange事件中管理RegEx验证和AJAX调用。

// obviously you'd want to be more specific than simply grabbing the first
// input element found.
document.getElementsByTagName('input')[0].onchange = function (e) { ... };

最后，您可以查看HTML5及其date type属性的实现。

Answer 3

在用户仍在更改值时显示错误消息并不是最佳模式。只需使用输入类型=＆＃34;日期＆＃34;并绑定到＆＃39;输入＆＃39;事件。仅当没有类型不匹配时，才会触发此类型的输入事件。

演示：http://jsfiddle.net/trixta/8e95N/

$(function(){
    $('input[type="date"]').on('input', function(){
        //your ajax
        console.log($.prop(this, 'value'));
    });
});

使用javascript触发输入框的pattern属性？

3 个答案: