<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="css/angular.css"></link>
<script src="js/angular.min.js"></script>
</head>
<body ng-controller="formCtrl">
<form name="test" novalidate role="form">
<input type="email" name="email" ng-model="info.email" required>
<p class="ng-hide" ng-show="test.email.$invalid && test.email.$dirty">填写文件</p>
</form>
<button ng-click="reset()">重置</button>
<script type="text/javascript">
var app = angular.module('app',[]);
app.controller('formCtrl', ['$scope', function($scope){
$scope.info = {};
$scope.reset = function(){
$scope.info.email='';
$scope.test.$setPristine();
}
}]);
</script>
</body>
</html>
表单验证 失去焦点显示错误
<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="css/angular.css"></link>
<script src="js/angular.min.js"></script>
</head>
<body ng-controller="formCtrl">
<form name="test" novalidate role="form">
<input ng-pattern="/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/" name="email" ng-model="info.email" required blur-tip>
<p class="ng-hide" ng-show="test.email.$invalid && test.email.$dirty && test.email.$blur">填写文件</p>
<input type="text" name="username" ng-model="info.name" ng-pattern="/^[A-Za-z]{1}[0-9A-Za-z_]{1,19}$/" required blur-tip>
<p class="ng-hide" ng-show="test.username.$invalid && test.username.$dirty && test.username.$blur">电话号码</p>
</form>
<button ng-click="reset()">重置</button>
<button ng-click="check()">查看</button>
<script type="text/javascript">
var app = angular.module('app',[]);
app.directive('blurTip',function(){
return{
restrict : 'A',
link : function(scope, element, attr){
if(window.addEventListener){
element[0].addEventListener('blur',function(event){
var formName = element[0].form.name;
var elName = attr.name;
scope.$apply(function(){
scope[formName][elName].$blur=true;
});
},false);
element[0].addEventListener('focus',function(event){
var formName = element[0].form.name;
var elName = attr.name;
if(!scope[formName][elName].$dirty){
scope.$apply(function(){
scope[formName][elName].$blur=false;
});
}
},false);
}else{
element[0].attachEvent('onblur',function(){
var formName = element[0].form.name;
var elName = attr.name;
scope.$apply(function(){
scope[formName][elName].$blur=true;
});
});
element[0].attachEvent('onfocus',function(event){
var formName = element[0].form.name;
var elName = attr.name;
if(!scope[formName][elName].$dirty){
scope.$apply(function(){
scope[formName][elName].$blur=false;
});
}
});
}
}
}
});
app.controller('formCtrl', ['$scope', function($scope){
$scope.info = {};
$scope.reset = function(){
$scope.info.email='';
$scope.test.$setPristine();
}
$scope.check = function(){
console.log($scope.test.email.$invalid);
console.log($scope.test.email.$dirty);
console.log($scope.test.email.$blur);
console.log($scope.test.username.$invalid);
console.log($scope.test.username.$dirty);
console.log($scope.test.username.$blur);
}
}]);
</script>
</body>
</html>
但还是有点问题~~~~
第一次失去焦点有效，第二次失去焦点有问题，怎破?????