在淘汰赛验证HTML设置错误信息

我想只会增加在HTML5，它的伟大工程验证规则使用淘汰赛验证：在淘汰赛验证HTML设置错误信息

然后，我会想改变默认的错误消息由浏览器生成（例如“此字段是必需的”或“无效的”）。这很容易在JavaScript代码中完成，但我相信这种文本应该进入HTML。这是可能的和如何？我想我在寻找类似：

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

来源

2014-09-22 prearrangedchaos

我实现了自定义的淘汰赛结合，解决了我的问题：

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}$"/>

任何其他建议？

来源

2014-09-22 12:48:54 prearrangedchaos

我一直在玩基因敲除验证。为了您的需要，您可以使用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代码中，当您定义验证配置时，一定要将其转为false insertMessages选项。如果没有，您也会看到默认消息。

但是...我认为使用JavaScript代码中的挖空扩展器来做到这一点更简单，更清洁，将所有自定义消息集中在某种常量文件中，而不是通过html分散它们。

无论如何，挖进knockout validation bindings，他们可能会帮助你满足你的需求。 :)

来源

2014-09-22 20:26:27 elbecita

在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只是抱着你的味精

变量你会在你的视图模型使用这样

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

来源

2014-09-23 12:17:05 Icepick

在淘汰赛验证HTML设置错误信息

回答

相关问题