表單驗證
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../7-BoothStrap/CSS/bootstrap.css"/>
<style type="text/css">
.col-xs-5{
border: hidden;
margin-top: 10px;
text-align: center;
}
.row{
margin-top: 5px;
}
.sucess{
border-color:#3C763D ;
}
.sucess.focus{
border-color:#A94442 ;
}
</style>
</head>
<!--
angularJS 中的表單驗證
1.表單中常用的驗證操作
$dirty 表單有填寫記錄
$valid 字段內容合法的
$invalid 字段內容是非法的
$pristine 表單沒有填寫記錄
$error 表單驗證不通過的錯誤信息
2.驗證時須給表單及需要驗證的input設置name屬性：
給form及input設置name後，會將form表單信息默認綁定到$scope作用域中
故可以使用formName.inputName.$驗證操作得到驗證結果：
例如：formName.inputName.$dirty="true" 表單被填寫過
formName.inputName.$error.required="true" 表單必填但未填
error支持的驗證有：required/minlength/pattern/email/date/url等
3.為避免沖突，例如使用type="email"時，H5也會進行驗證操作。如果只想使用angularJS驗證，可以使用
<form novalidate></form>屬性，禁用H5自帶驗證功能
-->
<body ng-app="app" ng-controller="control">
<div class="container" style="width: 70%;margin: 50px;">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title" style="text-align: center;">
用戶註冊
</div>
</div>
<div class="panel-body">
<form name="myForm" invalidate>
<div class="row">
<div class="col-xs-3" style="text-align: center;">
用戶名:
</div>
<div class="col-xs-9">
<input type="text" class="form-control " ng-model="user.name" name="name"
ng-minlength="4" ng-maxlength="10" required ng-class="{sucess:myForm.name.$invalid&&myForm.name.$dirty}"/>
<p style="color: red;margin: 0;" ng-show="myForm.name.$invalid&&myForm.name.$dirty">
<span ng-show="myForm.name.$error.required">用戶名必須填寫</span>
<span ng-show="myForm.name.$error.minlength">用戶名至少包含四個字符！</span>
<span ng-show="myForm.name.$error.maxlength">用戶名不能大於十個</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3" style="text-align: center;">
郵箱:
</div>
<div class="col-xs-9">
<input type="email" class="form-control" ng-model="user.mail" name="email" required/>
<p style="color: red;margin: 0;" ng-show="myForm.email.$invalid&&myForm.email.$dirty">
<span ng-show="myForm.email.$error.required">郵箱必須填寫</span>
<span ng-show="myForm.email.$error.email">格式不合法</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3" style="text-align: center;">
密碼:
</div>
<div class="col-xs-9">
<input type="password" class="form-control"ng-model="user.pwd" name="pwd"
required pattern="^\w{6,18}$"/>
<p style="color: red;margin: 0;" ng-show="myForm.pwd.$invalid&&myForm.pwd.$dirty">
<span ng-show="myForm.pwd.$error.pattern">密碼為6-18位，且</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3" style="text-align: center;">
密碼確認:
</div>
<div class="col-xs-9">
<input type="password" class="form-control" ng-model="user.re" name="repwd" required/>
<p style="color: red;margin: 0;" ng-show="myForm.repwd.$dirty&&myForm.repwd!=user.pwd">
兩次密碼輸入不一致
</p>
</div>
</div>
<div class="row">
<div class="col-xs-5" style="text-align: center;">
<input type="submit" value="註冊" class="btn-primary" ng-disabled="myForm.$dirty&&myForm.$invalid"/>
</div>
<div class="col-xs-5">
<input type="button" class="btn-warning" value="重置" ng-click="resets()"/>
</div>
</div>
</form>
</div>
</div>
<pre>
{{myForm.name.$error}}
</pre>
</div>
</body>
<script src="libs/angular.js"></script>
<script type="text/javascript">
/*
*/
angular.module("app",[])
.controller("control",function($scope){
$scope.initUser={
name:"李四",
mail:"[email protected]
pwd:"123456"
}
$scope.resets=function(){
$scope.user=angular.copy($scope.initUser);
}
// $scope.resets();
})
</script>
</html>
表單驗證