kendo-ui表单验证

  1. 云栖社区>
  2. 博客>
  3. 正文

kendo-ui表单验证

夕阳白雪 2014-12-11 15:55:00 浏览979
展开阅读全文

摘要:

  表单验证是每一个项目必不可少的,他能够帮助我们过滤不正确的用户输入,保证系统数据正确。例如下面这样:

 

kendo-ui也有自己的表单验证方法,下面就分享下kendo-ui的表单验证方式。

基本方法:

var validatable = $("#myform").kendoValidator().data("kendoValidator");
if (validatable.validate()) {
    //表单验证通过
} else {
    //表单验证未通过
}

表单验证规则与提示信息:

  表单验证规则与提示信息有三种方式可以定义,下面我们就来看一下

第一种:放在页面上

<input type="text" pattern="^[A-Za-z0-9\.\-_@]+$" validationMessage='最多30个字符(支持英文数字.-_@)'>

 

这种方式适合提示信息由后端人员来写,当后端套页面时只要修改vMessage里面的值就可以了。

第二种:通用模块中

kendo.ui.validator.rules.dataLength = function (input) {
        if (input.is('[dataLength]')) {
            return input.val().length <= input.attr('dataLength');
        }
        return true;
    };
kendo.ui.validator.messages.dataLength = function(input){
        var len = input.attr('dataLength');
        return kendo.format("最大长度不能超过{0}", len);
    };

 

这种方式适合定义通用验证规则,比如上面的限制最大长度。我们将上面的规则和提示信息放在公共模块中,在需要做验证规则的元素加上属性即可,如下

<input type="text" datalength="30"> 

第三种:放在验证函数中

validate: {
    rules: {
        reg: function(input){
            var regex = '^[A-Za-z0-9\.\-_@]{0,30}$';
            if(input.is('[reg]')){
                return !input.val() || regex.test(input.val());
            }
            return true;
        }
    },
    messages: {
        reg: '最多30个字符(支持英文数字.-_@)'
    }
}

这种方式适合提示信息由前端人员来定义,我们可以把提示信息放在一个全局对象中,方便维护。在定义表单验证时,只需要将规则对象传给函数即可,如下:

var validatable = $("#myform").kendoValidator(validate).data("kendoValidator");
if (validatable.validate()) {
}

小结:

  每一种方法都有自己的优点,选择适合自己项目的方式来做表单验证。

  官方实例

附录: 

  

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="stylesheet" href="kendo/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="kendo/styles/kendo.metro.min.css" />
    <link rel="stylesheet" href="kendo/styles/kendo.dataviz.min.css" />
    <style>
        .k-textbox {
            width: 11.8em;
        }

        .demo-section {
            width: 800px;
            padding: 0;
        }
        
        #tickets {
            width: 800px;
        }
        #tickets form {
            padding: 30px;
            margin-left: 150px;
        }
        #tickets h3 {
            font-weight: normal;
            font-size: 1.4em;
            margin: 0;
            padding: 0 0 20px;
        }

        #tickets ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        #tickets li {
            margin: 5px 0;
        }

        label {
            display: inline-block;
            width: 100px;
            text-align: right;
            padding-right: 10px;
        }

        .required {
            font-weight: bold;
        }

        .accept, .status {
            padding-left: 90px;
        }
        .confirm {
            text-align: right;
        }

        .valid {
            color: green;
        }

        .invalid {
            color: red;
        }
        span.k-tooltip {
            margin-left: 6px;
        }
    </style>
</head>
<body>
    <script type="text/javascript" charset="utf-8" src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="kendo/js/kendo.chopper.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="kendo/js/kendo.chopper.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="kendo/js/cultures/kendo.messages.zh-CN.js"></script>
    <script type="text/javascript" charset="utf-8" src="kendo/js/cultures/kendo.culture.zh-CN.min.js"></script>
    
    <div id="tickets">
        <form class="k-content" id="ticketsForm">
            <h3>Book Tickets</h3>
            <ul>
                <li>
                    <label for="fullname" class="required">Your Name</label>
                    <input type="text" id="fullname" name="fullname" class="k-textbox" placeholder="Full name" required validationMessage="Enter {0}" style="width: 200px;" />
                </li>
                <li>
                    <label for="search" class="required">Movie</label>
                    <input type="search" id="search" name="search" required validationMessage="Select movie" style="width: 200px;"/><span class="k-invalid-msg" data-for="search"></span>
                </li>
                <li>
                    <label for="time">Start time</label>
                    <select name="time" id="time" required data-required-msg="Select start time" style="width: 200px;">
                        <option>14:00</option>
                        <option>15:30</option>
                        <option>17:00</option>
                        <option>20:15</option>
                    </select>
                    <span class="k-invalid-msg" data-for="time"></span>
                </li>
                <li>
                    <label for="amount">Amount</label>
                    <input id="amount" name="Amount" type="text" min="1" max="10" value="1" required data-max-msg="Enter value between 1 and 10" style="width: 200px;" />
                    <span class="k-invalid-msg" data-for="Amount"></span>
                </li>
                <li>
                    <label for="email" class="required">Email</label>
                    <input type="email" id="email" name="Email" class="k-textbox" placeholder="e.g. myname@example.net"  required data-email-msg="Email format is not valid" style="width: 200px;" />
                </li>
                <li>
                    <label for="tel" class="required">Phone</label>
                    <input type="tel" id="tel" name="tel" class="k-textbox" pattern="\d{10}" placeholder="Enter a ten digit number" required
                        validationMessage="Enter at least ten digits" style="width: 200px;"/>
                </li>
                <li  class="accept">
                    <input type="checkbox" name="Accept" required validationMessage="Acceptance is required" /> I accept the terms of service
                </li>
                <li  class="confirm">
                    <button class="k-button k-primary" type="submit">Submit</button>
                </li>
                <li class="status">
                </li>
            </ul>
        </form>
    </div>
    <script>
    $(document).ready(function() {
        var data = [
        "12 Angry Men",
        "Il buono, il brutto, il cattivo.",
        "Inception",
        "One Flew Over the Cuckoo's Nest",
        "Pulp Fiction",
        "Schindler's List",
        "The Dark Knight",
        "The Godfather",
        "The Godfather: Part II",
        "The Shawshank Redemption"
        ];

        $("#search").kendoAutoComplete({
            dataSource: data,
            separator: ", "
        });

        $("#time").kendoDropDownList({
            optionLabel: "--Start time--"
        });

        $("#amount").kendoNumericTextBox();

        var validator = $("#ticketsForm").kendoValidator().data("kendoValidator"),
        status = $(".status");

        $("form").submit(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>

 

网友评论

登录后评论
0/500
评论
夕阳白雪
+ 关注