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 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;
})點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦