Angular JS 复写 html5 required

来源：互联网发布：淘宝收货时间延长编辑：程序博客网时间：2024/06/11 13:20

JavaScript代码

mod.directive('required', ['$translate', function ($translate) {        return function(scope, elm, attr) {            var raw = elm[0];            elm.bind('invalid', function(e) {                $translate('COM_REQUIRED').then(function(message){                    var $target = $(e.target);                    if($target.hasClass("focus")){                        return false;                    }                    $target.addClass('focus');                    $target.after('<p class="invalid-msg"><i class="glyphicon glyphicon-warning-sign"></i>' + message + '</p>');                });                return false;            });            elm.bind('focus', function(e) {                var $target = $(e.target);                $target.removeClass('focus');                $target.next('.invalid-msg').remove();            });        };    }]);

Css代码

.invalid-msg {    position: absolute;    left: 40%;    margin-top: 5px;    border: 1px solid #ccc;    padding: .2em 1em;    z-index: 2;    background-color: #fff;    color: #FF4136;    box-shadow: 1px 1px 3px #ccc;}.invalid-msg i {    margin-right: 5px;}.invalid-msg:before {    content: "";    position: absolute;    display: block;    top: -10px;    left: 20px;    border-left: 5px solid transparent;    border-right: 5px solid transparent;    border-bottom: 10px solid #ccc;}.invalid-msg:after {    content: "";    position: absolute;    display: block;    top: -8px;    left: 21px;    border-left: 4px solid transparent;    border-right: 4px solid transparent;    border-bottom: 8px solid #fff;}

0 0