在淘汰賽驗證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設置錯誤信息

回答

相關問題