設定驗證規則
HTML5 表單輸入欄位限制(Form input constraint attributes)
- 資料型別(type)。如:url、email。
- 驗證屬性(validation attribute),如:pattern、required、min、max、step、minlength、maxlength。
但要考慮:使用者瀏覽器版本是否支援,即便支援也可能
支援的不完全。還有一個問題:無法自訂驗證錯誤的訊息、位置及樣式。
<form>
姓名:<input type="text" name="name" required />
網誌:<input type="url" name="blogUrl" required />
<button>儲存</button>
</form>https://dojo.telerik.com/@suefengcheng/OyiDiDaR/2
Kendo UI Validator
支援 HTML 5 表單輸入欄位限制外,還可自訂驗證條件。
<form id="myform">
姓名:<input type="text" name="name" required />
網誌:<input type="url" name="blogUrl" required />
<button id="save">儲存</button>
</form>
<script>
$("#myform").kendoValidator({
messages: {
onlyTomIsAllowed: "只接受Tom。",
url: "要是網址!",
required: "必要!",
},
rules: {
onlyTomIsAllowed: function(input) {
if (input.is("[name=name]")) {
return input.val() === "Tom";
}
return true;
}
}
});
var validator = $("#myform").kendoValidator().data("kendoValidator");
$("#save").on("click", function() {
validator.validate();
});
</script>驗證對象
Form 表單中所有輸入欄位。
因此若要針對特定欄位驗證,請自行判斷input欄位。如下,針對名稱(name)為name的輸入欄位,驗證其值是否為 "Tom":
驗證順序
Kendo UI Validator會先做HTML 5 輸入欄位驗證,通過後才跑自訂驗證。
顯示錯誤訊息
Kendo UI Validator預設會將訊息放在輸入欄位旁,但這很可能被遮到。
<span/>
可自行加入一個<span/>,以data-for屬性指定對應的輸入欄位。如此,這輸入欄位的錯誤訊息便會顯示在這個<span/>裡。
<form id="myform">
<p>
姓名:<input type="text" name="name" required /><br/>
<span class="k-invalid-msg" data-for="name"></span>
</p>
<p>
網誌:<input type="url" name="blogUrl" required /><br/>
<span class="k-invalid-msg" data-for="blogUrl"></span>
</p>
<button id="save">儲存</button>
</form>https://dojo.telerik.com/@suefengcheng/OyiDiDaR/3
整筆/跨欄位驗證
https://demos.telerik.com/kendo-ui/validator/custom-validation