html:
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="all.js"></script>
</head>
<body ng-app="myApp" class="ng-scope" ng-controller="signUpController">
<form name="signUpForm" ng-submit="submitForm()">
<div class="form-group" ng-class="{'has-warning':signUpForm.username.$invalid && signUpForm.username.$touched}">
<label class="control-label" for="inputWarning">用户名 <br><span ng-if="signUpForm.username.$invalid && signUpForm.username.$touched">您的输入有误请检查</span></label>
<input name="username" id="inputWarning" class="form-control" ng-model="userdata.username" ng-minlength="5" ng-maxlength="10" required/>
</div>
<div class="form-group" ng-class="{'has-warning':signUpForm.password.$invalid && signUpForm.password.$touched}">
<label class="control-label" for="inputWarning1">密码 <br><span ng-if="signUpForm.password.$invalid && signUpForm.password.$touched">您的输入有误请检查</span></label>
<input name="password" id="inputWarning1" class="form-control" ng-model="userdata.password" ng-minlength="5" ng-maxlength="10" required/>
</div>
<div class="form-group" ng-class="{'has-warning':signUpForm.passwordConfirm.$invalid && signUpForm.passwordConfirm.$touched}">
<label class="control-label" for="inputWarning2">确认密码 <br><span ng-if="signUpForm.passwordConfirm.$invalid && signUpForm.passwordConfirm.$touched">您两次输入的密码不一致</span></label>
<input name="passwordConfirm" id="inputWarning2" class="form-control" ng-model="userdata.passwordConfirm" compare="userdata.password" required/>
</div>
<input class="btn btn-primary" type="submit"/>
</form>
</div>
</body>
</html>js：
var App=angular.module('myApp',[]);
App.controller('signUpController',function($scope){
$scope.userdata={};
$scope.submitForm=function(){
console.log($scope.userdata);
}
})
.directive('compare',function(){
var o={};
o.strict='AE'
o.scope={
orgText:'=compare'
}
o.require='ngModel';
o.link=function(sco,ele,att,con){
con.$validators.compare=function(v){
return v==sco.orgText;
}
sco.$watch('orgText',function(){
con.$validate();
})
}
return o;
})点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦