Knockout Validation

系统管理员 2022-04-10 02:37 153阅读 0赞

转自：[https://blog.csdn.net/afandaafandaafanda/article/details/48245611][https_blog.csdn.net_afandaafandaafanda_article_details_48245611]

Knockout 将View与Data进行双向绑定,在View上的数据改变能够自动反映到View所绑定的数据源上，同理，数据源的改变也能够立即反映到相关的View上。我们在使用Knockout的时候，还需要做的一个事情就是数据校验，在这方面，Knockout提供了很好的校验机制。

1.下载安装

下载之后我们的工程的javascript目录下面就有了knockout.js及knockout.validation.js文件了！

2.示例

引入相关文件：

@\{  
    ViewBag.Title = "Home Page";  
\}  
   
<style type="text/css">  
    .validationMessage \{  
        color: red;  
    \}  
</style>  
<script type="text/javascript">  
    $(document).ready(function() \{  
        var Person = function() \{  
            var self = this;  
            self.name = ko.observable().extend(\{  
                required:\{ params: true, message: "please input name."\} ,  
                maxLength: 6  
            \});  
            self.age = ko.observable().extend(\{  
                required: true,  
                number: \{  
                    params: true,  
                    message: "必须是数字",  
                \},  
                max:100  
            \});  
            self.email = ko.observable().extend(\{  
                required: \{  
                    params: true,  
                    message: "请填写Email"  
                \},  
                email: \{  
                    params: true,  
                    message: "Email格式不正确"  
                \}  
            \});  
            self.birthday = ko.observable().extend(\{  
                required: true,  
                date: \{  
                    params: true,  
                    message: "日期格式不正确"  
                \}  
            \});  
            self.score = ko.observable().extend(\{  
                required: true,  
                pattern: \{  
                    params: /^\\d+\[\\.\]?\\d\{0,2\}$/g,  
                    message: "必须是数字，并且最多两位小数！"  
                \}  
            \});  
            self.submit = function() \{  
                if (person.isValid().length == 0) \{  
                    alert('ok');  
                \} else \{  
                    alert("error");  
                \}  
            \};  
        \};  
        var person = new Person();  
        ko.applyBindings(person);  
        person.isValid = ko.validation.group(person);  
    \});  
</script>  
<br />  
<fieldset>  
    <legend>Add Person</legend>  
    <div>Name:</div>  
    <div>  
        <input data-bind="value: name" />  
    </div>  
    <div>  
        Age:  
    </div>  
    <div>  
        <input data-bind="value: age" />  
    </div>  
    <div>  
        Email:  
    </div>  
    <div>  
        <input data-bind="value: email" />  
    </div>  
    <div>  
        Score:  
    </div>  
    <div>  
        <input data-bind="value: score" /><br /><br />  
    </div>  
    <div>  
        <button id="btn" data-bind="click:submit">submit</button>  
    </div>  
</fieldset>  
效果如下：

3.总结

knockout自动捕获了控件的鼠标移开事件，自动进行校验。在提交的时候，通过isValidate来决定是否提交表单.  
\---------------------   
作者：feng1456   
来源：CSDN   
原文：https://blog.csdn.net/afandaafandaafanda/article/details/48245611   
版权声明：本文为博主原创文章，转载请附上博文链接！

[https_blog.csdn.net_afandaafandaafanda_article_details_48245611]: https://blog.csdn.net/afandaafandaafanda/article/details/48245611