<body?ng-app="myApp"?ng-controller="signUpController">
<form?name="signUpForm"?ng-submit="submitForm()">
<label>用戶名</label>
<pre>合法{{signUpForm.username.$valid}}</pre>
<pre>{{userdata.username}}</pre>
<input?name="username"
ng-model="userdata.username"
ng-class="{'error':signUpForm.username.$invalid?&&?signUpForm.username.$dirty}"
type="text"?
ng-minlength="4"?
ng-maxlength="10"?
required?/>
<p?class="error"?ng-if="(signUpForm.username.$error.required?&&?
signUpForm.username.touched">用戶名不能為空</p>
<p?class="error"?ng-if="(signUpForm.username.$error.minlength?||?signUpForm.username.$error.maxlength)?&&?
signUpForm.username.touched">用戶名長度應在4到10位之間</p>
<label>密碼</label>
<pre>合法{{signUpForm.password.$valid}}</pre>
<pre>{{userdata.password}}</pre>
<input?name="password"?
type="password"?
ng-model="userdata.password"?
required?
ng-minlength="6"?
ng-maxlength="255"
required?/>
<p?class="error"?ng-if="(signUpForm.username.$error.required?&&?
signUpForm.username.touched">密碼不能為空</p>
<p?class="error"?ng-if="(signUpForm.password.$error.minlength?||?signUpForm.password.$error.maxlength)?&&?
signUpForm.username.touched">用戶名長度應在6到255位之間</p>
<label>確認密碼</label>
<pre>合法{{signUpForm.password2.$valid}}</pre>
<pre>{{userdata.password2}}</pre>
<input?name="password2"?
type="password"?
ng-model="userdata.password2"?
compare="username.password"
required?/>
<p?class="error"?ng-if="(signUpForm.password2.$error.compare?&&?
signUpForm.password2.touched">密碼不一致</p>
<button?ng-disabled="signUpForm.username.$invalid?||?signUpForm.password.$invalid">提交</button>
</form>
</body>angular.module('myApp',[]).controller('signUpController',function($scope){
$scope.userdata={};//所有的表單數(shù)據(jù)都存在userdata里邊
$scope.submitForm=function(){
console.log($scope.userdata);
if($scope.signUpForm.$invalid){
alert("信息有誤");
}else{
alert("提交成功");
}
}
})
.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;
})
2018-01-07
你的每個touched都沒有加$符號，都加上試試。
2018-01-07
發(fā)現(xiàn)一個問題
<p?class="error"?ng-if="(signUpForm.username.$error.required?&&?
????????????????signUpForm.username.touched">用戶名不能為空</p>
touched前面應該有$符號，應該是下面這樣
<p?class="error"?ng-if="(signUpForm.username.$error.required?&&?
????????????????signUpForm.username.$touched">用戶名不能為空</p>
PS: 我也犯過同樣的錯誤。
2018-01-07
如果你是完全按照老師講的，完成的代碼的話，body里面應該有兩個script引入
<script src="lib/angular.min.js"></script>
<script src="js/main.js"></script>
你少了這兩個。
如果你已經在head里面引入了的話。
以下是我寫的代碼，你可以參考一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單驗證Demo</title>
<link rel="stylesheet" type="text/css" href="lib/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="lib/font-awesome/css/font-awesome.css">
<style type="text/css">
.red {
background: #a30;
}
.input_result {
position: relative;
top: -30px;
left: 280px;
}
.error {
color: #a10;
}
/*p.error {
display: none;
}*/
p.success {
color: #3c763d;
}
input.error {
border: 1px solid #a10;
}
.wrapper {
width: 300px;
margin: 30px auto;
}
</style>
</head>
<body ng-app="myApp" ng-controller="SignUpController">
<div class="wrapper">
<h2>注冊</h2>
<form name="signUpForm" ng-submit="submitForm()">
<div class="form-group" ng-class="{ 'has-success': signUpForm.username.$valid }">
<label>用戶名：</label>
<!-- <pre>合法：{{ signUpForm.username.$valid }}</pre>
<pre>{{ userdata.username }}</pre> -->
<input type="text"? ? ??
? ? ? ?name="username"?
? ? ? ?class="form-control"
? ? ? ?ng-model="userdata.username"
? ? ? ?required
? ? ? ?ng-minlength='4'
? ? ? ?ng-maxlength='32'>
<p class="fa fa-check input_result success"?
ng-if="signUpForm.username.$valid"></p>
<p class="error" ng-if="
signUpForm.username.$error.required &&?
signUpForm.username.$touched">
用戶名不可為空！
</p>
<p class="error" ng-if="
(signUpForm.username.$error.minlength ||
signUpForm.username.$error.maxlength) &&?
signUpForm.username.$touched">
用戶名長度應在4至32位之間！
</p>
</div>
<div class="form-group" ng-class="{ 'has-success': signUpForm.password.$valid }">
<label>密碼：</label>
<!-- <pre>合法：{{ signUpForm.password.$valid }}</pre>
<pre>{{ userdata.password2 }}</pre> -->
<input type="password"?
? ? ? ?name="password"?
? ? ? ?class="form-control"
? ? ? ?ng-model="userdata.password"
? ? ? ?ng-minlength='6'
? ? ? ?ng-maxlength='255'
? ? ? ?required>
<p class="fa fa-check input_result success"?
ng-if="signUpForm.password.$valid"></p>
<p class="error" ng-if="
signUpForm.password.$error.required &&
signUpForm.password.$touched">
密碼不可為空！
</p>
<p class="error" ng-if="
(signUpForm.password.$error.minlength ||
signUpForm.password.$error.maxlength) &&?
signUpForm.password.$touched">
? ? 密碼長度應在6至255位之間！
</p>
</div>
<div class="form-group" ng-class="{ 'has-success': signUpForm.password2.$valid }">
<label>確認密碼：</label>
<!-- <pre>合法：{{ signUpForm.password2.$valid }}</pre>
<pre>{{ userdata.password2 }}</pre> -->
<input type="password"?
? ? ? ?name="password2"?
? ? ? ?class="form-control"
? ? ? ?ng-model="userdata.password2"
? ? ? ?compare="userdata.password"
? ? ? ?required>
<p class="fa fa-check input_result success"?
ng-if="signUpForm.password2.$valid"></p>
<p class="error" ng-if="
signUpForm.password2.$error.compare &&
signUpForm.password2.$touched">
兩次密碼輸入不一致！
</p>
</div>
<div class="form-group">
<button class="btn btn-primary">注冊</button>
</div>
</form>
</div>
<!-- <form name="signUpForm" ng-submit="submitForm()">
<div class="form-group">
<label>用戶名：</label>
<input name="username"
? ?ng-model="username"
? ?ng-class="{ 'error': signUpForm.username.$invalid &&
signUpForm.username.$touched }"
? ?ng-minlength="4"
? ?required
? ?class="form-control" > -->
? ? <!-- <input name="username2"
? ?ng-model="username2"
? ?ng-disabled="signUpForm.username.$valid"
? ?required?
? ?class="form-control" > -->
? ? <!-- <div ng-if="signUpForm.username.$invalid &&
? ? signUpForm.username.$touched">您的輸入有誤請檢查</div>
? ??
? ? <div ng-if="submitForm.username.$valid &&
? ? signUpForm.username.$touched" >
? ? sit amet, adipisicing elit. Ab ad animi as
? ? </div> -->
<!-- </div>
<button type="submit" class="btn btn-primary" ng-disabled="signUpForm.username.$invalid">提交</button>
</form> -->
<!-- <input?
class="form-control"?
ng-model="name"?
type="text"?
ng-minlength='4'?
ng-maxlength='10'>
<div class="red">{{ name }}</div>
<input?
class="form-control"?
ng-model="name2"?
type="text"?
ng-minlength='4'?
ng-maxlength='10'>
<div class="red">{{ name2 }}</div> -->
<script src="lib/angular.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
------------分割線------------
angular.module('myApp', [])
? ?.controller('SignUpController', function($scope){
? ? $scope.userdata = {};
? ? $scope.submitForm = function(){
? ? console.log($scope.userdata);
? ? if($scope.submitForm.$invalid){
? ? alert("請檢查您的信息");
? ? }else{
? ? alert("提交成功！");
? ? }
? ? }
? ?})
? ?.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;
? ?})
你可以對照著看一下。