kendoValidator

Posted on 2020-05-19 Edited on 2023-11-24 In Kendo UI Views: Disqus:

一、一個 kendo Validator 的 validate() 方法基本使用如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>

<body>
    <div id="myform">
        <input name="username" required /> <br />
        <button id="save">Save</button>
    </div>
    <script>
        var validatable = $("#myform").kendoValidator().data("kendoValidator");
        $("#save").click(function () {
            if (validatable.validate()) {
                console.log("data pass");
            } else {
                console.log("data fail");
            }
        });
    </script>
</body>

</html>

說明：

1、kendoValidator 的 validate() 方法，是用來取得一表單檢核是否成功或失敗。

二、rules

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>

<body>

    <form id="myform">
        <label for="username">username：</label>
        <input name="username" placeholder="value must to be 'tom'" /> <br />
        <label for="town">town：</label>
        <input name="town" placeholder="must have a value" /> <br />
        <button>Validate</button>
    </form>

    <script>
        $("#myform").kendoValidator({
            rules: {
                customRule1: function (input) {
                    return !($.trim(input.val()) === ""); //return false 代表檢核不通過
                },
                customRule2: function (input) {
                    // 特別針對 [name=username] 欄位去做檢核
                    if (input.is("[name=username]")) {
                        console.log("customRule2：" + (input.val() === "Tom"));
                        return !(input.val() !== "Tom");
                    } else {
                        return true;//return true 代表通過檢核
                    }
                }
            },
            messages: {
                customRule1: "All fields are required",
                customRule2: "Your UserName must be Tom"
            }
        });
    </script>
</body>

</html>

說明：

1、每個欄位在檢核時都要通過 customRule1 與 customRule2 的條件檢查，

return true 代表通過檢核，return false 代表檢核不通過。

2、我判斷條件的寫法是，因為不符合條件的數量會比較少，

所以把不符合條件抓出來做邏輯判斷會比較簡單。

3、如有多項檢核規則，其先後順序會先從 customRule1 開始判斷，

如果 customRule1 檢核不通過，則不會繼續 customRule2 的判斷。

三、messages

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>

<body>

    <form id="myform">
        <label for="username">username：</label>
        <input name="username" placeholder="value must to be 'tom'" /> <br />
        <label for="town">town：</label>
        <input name="town" required placeholder="must have a value" /> <br />
        <button>Validate</button>
    </form>

    <script>
        $("#myform").kendoValidator({
            rules: {
                customRule2: function (input) {
                    // 特別針對 [name=username] 欄位去做檢核
                    if (input.is("[name=username]")) {
                        console.log("customRule2：" + (input.val() === "Tom"));
                        return !(input.val() !== "Tom");
                    } else {
                        return true;//return true 代表通過檢核
                    }
                }
            },
            messages: {
                customRule2: "Your UserName must be Tom",
                required: "欄位不能為空"
            }
        });
    </script>
</body>

</html>

說明：

除了可以針對自訂規則客製錯誤訊息之外，也可以針對內建規則客製錯誤訊息。

四、data-[rule]-msg

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>

<body>
    <form id="myform">
        <input type="text" required data-required-msg="field not to null">
        <button>Validate</button>
    </form>

    <script>
        $("#myform").kendoValidator();
    </script>
</body>

</html>

說明：

也可以經由 data-[rule]-msg 型式來針對不同規則客製化不同的錯誤訊息。

五、validationMessage

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>

<body>
    <form id="myform">
        <input type="tel" pattern="\d{10}" validationMessage="Plase enter a ten digit phone number" value="123"> <br />
        <button>Validate</button>
    </form>

    <script>
        $("#myform").kendoValidator();
    </script>
</body>

</html>

說明：

跟 data-[rule]-msg 型式不一樣的是，使用 validationMessage 屬性，

該 input tag 所有規則的錯誤訊息，將會統一成一種。

六、其他範例

一個 kendoValidator 基本範例如下

<!DOCTYPE html>
<html>

<head>
    <link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>

<body>
    <form id="ticketsForm">
        <ul id="fieldlist">
            <li>
                <label for="fullname" class="required">Your Name</label>
                <input type="text" id="fullname" name="fullname" class="k-textbox" required
                    validationMessage="Enter {0}" />
            </li>
        </ul>
    </form>
    <p class="status" id="status"></p>
    <button id="sendBtn" class="k-button k-primary" type="submit">Submit</button>

    <script>
        $(document).ready(function () {
            var validator = $("#ticketsForm").kendoValidator().data("kendoValidator"),
                status = $("#status");

            $("#sendBtn").click(function (event) {
                event.preventDefault();
                if (validator.validate()) {
                    status.text("Hooray! Your tickets has been booked!")
                        .removeClass("invalid")
                        .addClass("valid");
                } else {
                    status.text("Oops! There is invalid data in the form.")
                        .removeClass("valid")
                        .addClass("invalid");
                }
            });
        });
    </script>
</body>

</html>

說明：

1、validationMessage = "{0}"，"{0}" 指的是 input tag 的 name 屬性。

2、當使用 jQuery 的 $("form").submit() 方法，並且 <button id="sendBtn" type="submit"> 放在 form tag 裡面，

對已經 kendoValidator 後的表單，當按下 sendBtn 時，

檢核失敗將不會再執行 $("#sendBtn").click() 所自定義的 click 事件。

建議不要用 jQuery .submit() 方法的方式去做，改用自己呼叫 ajax 方式去傳表單資料至後端。

參考資料：

kendo.ui.Validator

Validator - Tooltip