Question

即时验证和显示用户输入的最佳方法？

Answer 1

您可以通过截取该给定文本框的一个关键事件，然后对每个按键进行验证来完成此操作。如果你想为复制粘贴执行此操作，也可以在on paster事件上添加副本。

var pattern = new RegExp("^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$")

$(document).ready(function()
{
    $("#txtTime").keydown(function() {

        if(!pattern.test($("#txtTime").val()))
        {
            $("#txtTime").css("invalid");
        }
        else
        {
            $("#txtTime").css("valid");
        }
    });

    $("#txtTime").on('paste', function() {

        if(!pattern.test($("#txtTime").val()))
        {
            $("#txtTime").css("invalid");
        }
        else
        {
            $("#txtTime").css("valid");
        }
    });

});

Answer 2

如果需要服务器端验证，则将输入字段包装到表单元素中。使用验证脚本的url设置表单的action属性。然后：

$('#your-form-id').on('submit', function () {
    e.preventDefault();
    $.ajax({
        url: $(e.target).attr('action'),
        type: $(e.target).attr('method'),
        data: $(e.target).serialize(),
        success: function (answer) {
            if (answer.valid) {
                // do "next step"
            }
            else {
                // do "invalid field step"
            }
        }
    });
    return false;
}

立即验证输入字段值的最佳方法是什么？

2 个答案: