Question

我有一个班级：

Model.Feedback.Data = function () {
    var self = this;

    self.Name = ko.observable('').extend({
        pattern: {
            params: /^[A-Za-z]+[A-Za-z\s]*$/,
            message: 'Invalid name'
        }
    });

    self.Email = ko.observable('').extend({     
        pattern: {
            params: /^[a-zA-Z0-9!#$%&'*+/=?^`{|}~]+(?:[\._-][a-zA-Z0-9!#$%&'*+/=?^`{|}~]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/,
            message: 'Invalid e-mail'
        },
        maxLength: {
            params: 256,
            message: 'Long email'
        }
    });

    return this;
};

我有一个HTML代码：

<form class="form-additem-checkin" data-bind="submit: send">
    <!--ko with: Data-->
    <div class="form-additem-group-row">
        <div class="form-additem-group-row__col form-additem-group-row__col_label"><div class="form-additem-group__label">E-mail</div></div>
        <div class="form-additem-group-row__col form-additem-group-row__col_field">
            <input type="text" class="field field_type2 input--full" placeholder="You e-mail" data-bind="textInput: Email" />
            <div class="form-additem-group-row__error" data-bind="validationMessage: Email"></div>
        </div>
    </div>  
    <div class="form-additem-group-row">
        <div class="form-additem-group-row__col form-additem-group-row__col_label"><div class="form-additem-group__label">Name</div></div>
        <div class="form-additem-group-row__col form-additem-group-row__col_field">
            <input type="text" class="field field_type2 input--full" placeholder="You name" data-bind="textInput: Name" />
            <div class="form-additem-group-row__error" data-bind="validationMessage: Name"></div>
        </div>
    </div>
    <!--/ko-->
    <div class="form-additem-auth__button">
        <button type="submit" class="btn btn--green form-additem-button">Send</button>
    </div>
</form>

现在，如果您在电子邮件字段中输入test @ a，您将立即收到错误消息。

在失去场地焦点后，我该怎么做才能检查场地？

Answer 1

使用value绑定代替textInput似乎可以解决它。（学分：Jason Spake）

或者，您可以使用hasFocus绑定，并在没有焦点时显示错误消息。（一旦输入再次聚焦，不那么优雅+消息就会消失。）

输入后的敲除验证

1 个答案: