AngularJS表單和輸入驗(yàn)證實(shí)例
更新時(shí)間：2016年11月02日 14:21:45 作者：A_山水子農(nóng)
本篇文章詳細(xì)的介紹了AngularJS表單和輸入驗(yàn)證實(shí)例， AngularJS表單可以提供驗(yàn)證功能。有需要的可以了解一下。
AngularJS 表單和控件可以提供驗(yàn)證功能，并對(duì)用戶輸入的非法數(shù)據(jù)進(jìn)行警告。
注意：客戶端的驗(yàn)證不能確保用戶輸入數(shù)據(jù)的安全，所以服務(wù)端的數(shù)據(jù)驗(yàn)證也是必須的。
1、HTML 控件
以下 HTML input 元素被稱為 HTML 控件:input 元素、select 元素、button 元素、textarea 元素。
2、HTML 表單
AngularJS 表單是輸入控件的集合。HTML 表單通常與 HTML 控件同時(shí)存在。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user }}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName:"John", lastName:"Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>
</body>
</html>
3、輸入驗(yàn)證
AngularJS 表單和控件可以提供驗(yàn)證功能，并對(duì)用戶輸入的非法數(shù)據(jù)進(jìn)行警告?？蛻舳说尿?yàn)證不能確保用戶輸入數(shù)據(jù)的安全，所以服務(wù)端的數(shù)據(jù)驗(yàn)證也是必須的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h2>驗(yàn)證實(shí)例</h2>
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>用戶名:
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用戶名是必須的。</span>
</span>
</p>
<p>郵 箱:
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">郵箱是必須的。</span>
<span ng-show="myForm.email.$error.email">非法的郵箱地址。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>
</body>
</html>
AngularJS ng-model 指令用于綁定輸入元素到模型中。模型對(duì)象有兩個(gè)屬性： user 和 email。我們使用了 ng-show指令，color:red 在郵件是 $dirty 或 $invalid 才顯示。
沒用初始值的輸入驗(yàn)證：注意ng-app=""，ng-app有值就必須連接到代碼模塊，利用angular.module 函數(shù)來創(chuàng)建模塊。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>angularJs</title> <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <h2>驗(yàn)證實(shí)例</h2> <form ng-app="" name="myForm" novalidate> <p>用戶名: <input type="text" name="user" ng-model="user" required> <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span ng-show="myForm.user.$error.required">用戶名是必須的。</span> </span> </p> <p>郵 箱: <input type="email" name="email" ng-model="email" required> <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> <span ng-show="myForm.email.$error.required">郵箱是必須的。</span> <span ng-show="myForm.email.$error.email">非法的郵箱地址。</span> </span> </p> <p> <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid"> </p> </form> </body> </html>
4、ng-disabled實(shí)例
<!doctype html>
<html ng-app="MyApp">
<head>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="Controller">
<form name="form" class="css-form" novalidate>
Name:
<input type="text" ng-model="user.name" name="uName" required /><br/>
E-mail:
<input type="email" ng-model="user.email" name="uEmail" required /><br/>
<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">
Invalid:
<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>
Gender:<br/>
<input type="radio" ng-model="user.gender" value="male" />
male
<input type="radio" ng-model="user.gender" value="female" />
female<br/>
<input type="checkbox" ng-model="user.agree" name="userAgree" required />
I agree:
<input ng-show="user.agree" type="text" ng-model="user.agreeSign" required />
<div ng-show="!user.agree || !user.agreeSign">
Please agree and sign.
</div>
<br/>
<!--ng-disabled為true時(shí)禁止使用，ng-disabled實(shí)時(shí)監(jiān)控應(yīng)用程序-->
<button ng-click="reset()" ng-disabled="isUnchanged(user)">
RESET
</button>
<button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)">
SAVE
</button>
</form>
</div>
<script type="text/javascript">
var app=angular.module("MyApp",[]);
app.controller("Controller",function($scope){
$scope.master = {};
$scope.update=function(user){
$scope.master=$scope.copy(user);
};
$scope.reset=function(){
$scope.user=angular.copy($scope.master);
};
$scope.isUnchanged=function(user){
//判斷user和$scope.master是否相等，相等返回true，否則返回false
return angular.equals(user,$scope.master);
};
$scope.reset();
});
</script>
</body>
</html>
5、ng-submit實(shí)例
<html ng-app='TestFormModule'>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="js/angular.min.js"></script>
</head>
<body><!--ng-submit綁定表單提交事件-->
<form name="myForm" ng-submit="save()" ng-controller="TestFormModule">
<input name="userName" type="text" ng-model="user.userName" required/>
<input name="password" type="password" ng-model="user.password" required/><br />
<input type="submit" ng-disabled="myForm.$invalid"/>
</form>
</body>
<script type="text/javascript">
var app=angular.module("TestFormModule",[]);
app.controller("TestFormModule",function($scope){
$scope.user={
userName:"山水子農(nóng)",
password:''
};
$scope.save=function(){
console.log("保存數(shù)據(jù)中...");
}
});
</script>
</html>
6、maxlength和minlength實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
<title>表單驗(yàn)證</title>
</head>
<body ng-app="myApp" >
<div ng-controller="myCtrl">
<form name="form">
<label for="maxlength">Set a maxlength: </label>
<input type="number" ng-model="maxlength" id="maxlength" /><br>
<label for="minlength">Set a minlength: </label>
<input type="number" ng-model="minlength" id="minlength" /><br><hr>
<label for="input">This input is restricted by the current maxlength and minlength: </label><br>
<input type="text" ng-model="textmodel" id="text" name="text" ng-maxlength="maxlength" ng-minlength="minlength"/><br>
text input valid? = <code>{{form.text.$valid}}</code><br>
text model = <code>{{textmodel}}</code><br><hr>
<label for="input">This input is restricted by the current maxlength and minlength: </label><br>
<input type="number" ng-model="numbermodel" id="number" name="number" ng-maxlength="maxlength" ng-minlength="minlength"/><br>
number input valid? = <code>{{form.number.$valid}}</code><br>
number model = <code>{{numbermodel}}</code>
</form>
</div>
<script type="text/javascript">
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.maxlength=8;
$scope.minlength=4;
});
</script>
</body>
</html>
7、ng-class實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
<title>表單驗(yàn)證</title>
<style type="text/css">
.deleted {
text-decoration: line-through;
}
.bold {
font-weight: bold;
}
.red {
color: red;
}
.error {
color: red;
background-color: yellow;
}
.base-class {
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.base-class.my-class {
color: red;
font-size:3em;
}
</style>
</head>
<body ng-app="myApp" >
<div ng-controller="myCtrl">
<form name="form">
<p ng-class="{deleted: deleted, bold: bold, 'error': error}">Map Syntax Example</p>
<label><input type="checkbox" ng-model="deleted">deleted (apply "deleted" class)</label><br>
<label><input type="checkbox" ng-model="bold">bold (apply "bold" class)</label><br>
<label><input type="checkbox" ng-model="error">error (apply "error" class)</label>
<hr>
<input id="setbtn" type="button" value="set" ng-click="myVar='my-class'">
<input id="clearbtn" type="button" value="clear" ng-click="myVar=''">
<br>
<span class="base-class" ng-class="myVar">Sample Text</span>
</form>
</div>
<script type="text/javascript">
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
});
</script>
</body>
</html><strong>
</strong>
8、ng-if實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
<title>表單驗(yàn)證</title>
<style>
.animate-if {
width:400px;
border:2px solid yellowgreen;
border-radius: 10px;
padding:10px;
display: block;
}
</style>
</head>
<body ng-app="myApp" >
<div ng-controller="myCtrl">
<form name="form">
<label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
Show when checked:
<span ng-if="checked" class="animate-if">
This is removed when the checkbox is unchecked.
</span>
</form>
</div>
<script type="text/javascript">
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
});
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
angularjs實(shí)現(xiàn)對(duì)表單輸入改變的監(jiān)控(ng-change和watch兩種方式)
這篇文章主要介紹了angularjs通過ng-change和watch兩種方式實(shí)現(xiàn)對(duì)表單輸入改變的監(jiān)控,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了AngularJS初始化過程分析(引導(dǎo)程序),這一節(jié)解釋了AngularJS初始化的過程,以及需要的時(shí)候你該如何修改AngularJS的初始化,需要的朋友可以參考下2014-12-12
Angular?服務(wù)器端渲染錯(cuò)誤消息localStorage?is?not?defined解決分析
這篇文章主要為大家介紹了Angular?服務(wù)器端渲染錯(cuò)誤消息localStorage?is?not?defined解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了淺談angular2路由預(yù)加載策略，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
使用 Angular RouteReuseStrategy 緩存（路由）組件的實(shí)例代碼
這篇文章主要介紹了使用 Angular RouteReuseStrategy 緩存（路由）組件的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了AngularJS上拉加載問題解決方法的相關(guān)資料,該問題在項(xiàng)目中一直存在，小編給大家分享解決辦法，需要的朋友可以參考下2016-05-05
AngularJS實(shí)現(xiàn)按鈕提示與點(diǎn)擊變色效果
這篇文章給大家介紹了如何利用AngularJS實(shí)現(xiàn)按鈕提示與點(diǎn)擊變色的效果，文中提供了實(shí)例代碼，對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值，下面來一起看看吧。2016-09-09
在AngularJs中我們會(huì)不可避免的使用第三方庫，這篇文章主要介紹了如何在AngularJs中調(diào)用第三方插件庫，有興趣的可以了解下2017-05-05
AngularJS $http模塊POST請(qǐng)求實(shí)現(xiàn)
本篇文章主要介紹了AngularJS $http模塊POST請(qǐng)求實(shí)現(xiàn)，這里整理了詳細(xì)的代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
AngularJs1.x自定義指令獨(dú)立作用域的函數(shù)傳入?yún)?shù)方法
今天小編就為大家分享一篇AngularJs1.x自定義指令獨(dú)立作用域的函數(shù)傳入?yún)?shù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10