jquery自定义控件做简单输入验证

自定义控件：

(function ($) {
    var callbackMethod = function (e) {
        if($(e).val()==""){
            $(e).val(defaultParam.tipMessage);
        }
       
    }
    var defaultParam={
        tipMessage: "请输入。。。",
        callback:callbackMethod
    };
    $.fn.validation = function (param) {
        var parameters = $.extend({},defaultParam,param);
        $(this).blur(function () {
            parameters.callback(this);
        });
        $(this).focus(function () {
            $(this).val("");
        });
        return this.each(function () {
            var text = $(this).val();
            parameters.callback(this);
        });
       
    }
})(jQuery);

使用的时候：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
    <style type="text/css">
        .add {
            background-color: #f0f2f4;
            }
    </style>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/validate.js" type="text/javascript"></script>
    <script type="text/javascript">
        var passwordCallBack=function(e){
            if ($(e).val().length < 6 && $(e).val().length!=0) {
                alert("密码长度小于6");
                return;
            }
        };
        $(function () {
            $("#name").validation().addClass("add");
            $("#password").validation({ tipMessage: "", callback: passwordCallBack });
        });
    </script>
<body>
    名称：<input id="name" value=""/></br>
    密码：<input id="password" type="password" />
</body>
</html>

posted @ 2013-10-22 12:32  j、g、c-coder  阅读(223)  评论(0)    收藏  举报