用jquery validate封装自己的验证库

如果一个项目中多个地方要验证，例如登录、注册等，每个页面都写验证代码，相当的痛苦，那这节就是用jquery validate封装自己的验证库，然后直接引入使用就可以了

下面是一个验证库示例：

jquery.cms_validate.js

(function($){
    /**
     * 继承jquery插件的方法，一定熟悉
     */
    var __validate = $.fn.validate;
    $.fn.cms_validate = function(opts) {
        /**
     * 希望在这里来定义规则
     */
    var __rules = $.extend({
        username:"required",
        password:"required",
        age:"digits",
        ach:"number",
        email:"email",
        url:"url"
    },opts?(opts.rules||{}):{});
    var __messages = $.extend({
        username:"用户名不能为空",
        password:"用户密码不能为空",
        age:"年龄必须是整数",
        ach:"成绩必须为数字",
        email:"邮件的格式不正确",
        url:"链接地址不正确"
    },opts?(opts.messages||{}):{});
         
    var __opts = $.extend((opts||{}),{
        rules:__rules,
        messages:__messages
    });
    //完成了prototype的继承
    $.extend($.fn.validate.prototype,__opts||{});
        __validate.call(this,__opts);
    };
})(jQuery);

验证库的使用

直接使用

<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.cms_validate.js"></script>
<script type="text/javascript">
$(function(){
    $("#addForm").cms_validate();
})
</script>

扩展使用

<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.cms_validate.js"></script>
<script type="text/javascript">
$(function(){
    $("#addForm").cms_validate({
    rules:{
            username:{
            minlength:3,
            required:true
        }
    },
    messages:{
        username:{
        required:"用户名不能为空",
        minlength:"用户名必须大于3"
        }   
    }
    });
})
</script>

本文链接：用jquery validate封装自己的验证库，由领悟书生原创

转载请注明出处【http://www.656463.com/article/362】