自定义验证消息未显示在页面上

Question

我在表单上有一个类型为 email 的输入字段，我必须验证输入的 email 地址并在用户尝试导航到下一页时显示验证错误消息。 它只是不检查模式，而且只允许少数 email 域。 下面是 email 字段

<div class="form-group required">
    <label for="EmailAddr" class="control-label">Email</label>
    <input type="email" maxlength="150" id="EmailAddr" name="EmailAddr" class="form-control" data-bind="value : emailAddr" required />
</div> 

并且视图模型中的字段是

self.emailAddr = ko.observable().extend({ required: { params: true, message: "Required! Please enter a valid email" }, email: { params: true, message: "Required! Please enter a valid email" } });

下一页按钮 function 如下所示

self.next = function () {
    self.errors = ko.validation.group(this);

    if (self.errors().length != 0) {
        self.errors.showAllMessages();
    }

    if (!formIsValid('Page_' + self.currentPage())) {
        $(window).scrollTop(0);
        return false;
    }

    if (self.referringPage() != null) {
        self.currentPage(self.referringPage());
        self.referringPage(null);
    } else {
        self.currentPage(self.currentPage() + 1);
    }
    self.gotoPage();
};

而在validator.js文件上的formIsValid function就像

function formIsValid(formToValidate) {
// Get a handle to the form the button belongs to
var form = $('#' + formToValidate);
var valid = true;

// Turn off any old error messages so we're starting
// fresh.
$('.validation-error', form).hide();
$('.field-error', form).removeClass('field-error');

var emailPattern = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|bio|biz|cat|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;
$('input[type=email]', form).each(function (idx, elem) {
    if ($(elem).val() != '' && $(elem).is(':visible')) {
        if (!emailPattern.test($(elem).val())) {
            $(elem).addClass('field-error');
            $(elem).next().show();
            valid = false;
        }
    }
});
    return valid;
}

当我将 email 作为 a@c 时，它会抛出必需的。 请在字段上输入有效的 email 错误，或者当我提供 email 模式中列出的域时，例如.com/，bio 我可以导航到下一页。 但是当我尝试 give.xyz 时，它不会让用户导航到下一页，也不会在该字段上显示任何验证错误消息，我在这里缺少什么。 我是 KnockoutJS 和验证的新手。 任何帮助是极大的赞赏

Answer 1

这与淘汰赛或验证无关； 纯粹是您的正则表达式不适用于xyz 。 原因是它仅适用于 2-char 域和给定列表中的域。

如果您添加到正则表达式以允许可选的第三个字符，则它可以工作：

^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|bio|biz|cat|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z][a-z]?)|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$

查找|[az][az])我在哪里添加了[az]?