angularjs验证
首先要包含bootstrap.js，因为用了它的popover。
js代码：
.directive('popover', function() {
return {
restrict: 'A',
scope: {
shown: '=',
},
link: function (scope, element) {
element.popover({ placement: 'top', trigger: 'manual' });
$('.popover').css("background-color", "red");
scope.$watch('shown', function (shown) {
if (shown) {
element.popover('show');
} else {
element.popover('hide');
}
});
}
};
});
刚发现一段试验代码没去掉，不要那句jQuery css调用,只需要在css文件里直接加定义就行。例如：
.popover-content
{
color: red;
}
修改后的代码
.directive('popover', function() {
return {
restrict: 'A',
scope: {
shown: '=',
},
link: function (scope, element) {
element.popover({ placement: 'top', trigger: 'manual' });
scope.$watch('shown', function (shown) {
if (shown) {
element.popover('show');
} else {
element.popover('hide');
}
});
}
};
});
html代码：
<form name="form1" role="form">
<div class="form-group">
<label>邮箱</label>
<input type="email" name="email" ng-model="email" class="form-control" placeholder="输入邮箱" popover shown="form1.email.$invalid" data-content="你的邮件地址不合法">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" name="password" ng-model="password" ng-minlength="6" class="form-control" placeholder="输入密码" popover shown="form1.password.$invalid" data-content="密码长度不能小于6">
</div>
<div class="form-group">
<label>年龄</label>
<input type="number" name="age" ng-model="age" class="form-control" placeholder="年龄" popover shown="form1.age.$invalid" data-content="年龄必须是数字">
</div>
<button type="submit" class="btn btn-default">Submit</ button>
</form>
注意：像email， url, number之类的，已经实现了，不用ng-pattern