使用敲除验证在html中设置错误消息

Question

我只想通过在HTML5中添加验证规则来使用knockout-validation，这很有效：

http://jsfiddle.net/gt228dgm/1/

然后，我想要更改浏览器生成的默认错误消息(如“此字段是必需的。”或“无效”)。这在javascript代码中很容易做到，但我相信这类文本应该放入HTML中。这是可能的吗?如何实现？我想我正在寻找类似这样的东西：

<input data-bind='value: firstName, validate: { message: "Please enter first name" }' required pattern="^[A-Za-z]{1,255}$"/></label>

Answer 1

我已经实现了一个自定义的knockout绑定来解决我的问题：

ko.bindingHandlers.validate = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {

        var valueBinding = allBindings().value;
        var value = valueAccessor();

        if (value) {
            valueBinding.extend(value);
        }
    }
};

然后，该绑定如下所示

<input data-bind='value: firstName, validate: { required: { message: 'Full name is missing' }, pattern: { message: 'Full name should be max. 255 alphanumeric characters' } }' required pattern="^[A-Za-z]{1,255}$"/>

还有其他建议吗？

Answer 2

这几天我一直在玩击倒验证。根据您的需要，您可以使用validationMessage绑定。下面是修改后的代码示例，以使用此绑定：http://jsfiddle.net/elbecita/gt228dgm/4/

基本上，你最终会得到这样的结果：

<span data-bind="validationMessage: firstName, text: 'Your error.'"></span>
<input data-bind='value: firstName, valueUpdate: "input"' required pattern="^[A-Za-z]{1,255}$" />

我添加valueUpdate绑定只是为了立即显示验证消息。然后，在您的javascript代码中，当您定义验证配置时，请确保将insertMessages选项设置为false。如果不是，您也会看到默认消息。

但是..。我认为用javascript代码中的knockout扩展器来做这件事更容易、更干净，将所有自定义消息集中在某种类型的常量文件中，而不是将它们分散在html中。

无论如何，深入研究knockout validation bindings，它们可能会帮助您满足您的需求。:)

Answer 3

在KO中处理自定义验证消息的正确方法是创建一个自定义验证而不是绑定。下面是一个简单的数字验证示例

ko.validation.rules['integerFormat'] = {
    validator: function (value, options) {
        if (!value) return true;
        var regex = /^\d+$/;
        var matches = regex.test(value);
        if(matches){
            value = parseInt(value,10);
            return typeof value== "number" && isFinite(value) && value%1===0;
        }else{
            return false
        }
    },
    message: app.MyCustomIntegerNotValidMSG
}

app.MyCustomIntegerNotValidMSG只是一个保存味精的变量

您可以在ViewModel中使用它，如下所示

self.myIntegerToValidate = ko.observable().extend({
    integerFormat:{}
});;