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

kcrjzv8t  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(208)

我在表单上有一个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" } });

下一页按钮的功能如下

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 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;
}

当我给予电子邮件作为一个@c它抛出必填!请输入一个有效的电子邮件错误的字段或当我给域中列出的电子邮件模式like.com/.bio我可以导航到下一页,但当我试图给.xyz它不让用户导航到下一页,也不会显示任何验证错误消息的字段.什么是我错过了这里,我是新的KnockoutJS和验证。任何帮助都非常感谢

7uhlpewt

7uhlpewt1#

这与淘汰或验证无关;这纯粹是你的正则表达式对xyz不起作用,原因是它只对2个字符的域和给定列表中的域起作用。
如果你在正则表达式中添加一个可选的第三个字符,它就可以工作:

^[-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})?$

查找添加了[a-z]?|[a-z][a-z])

相关问题