Pengesahan input AngularJS

Borang dan kawalan AngularJS boleh mengesahkan data yang dimasukkan.

Pengesahan Input

Dalam bab sebelumnya, anda telah mempelajari tentang borang dan kawalan AngularJS.

Borang dan kawalan AngularJS boleh menyediakan fungsi pengesahan dan memberi amaran kepada pengguna tentang data haram yang dimasukkan.

	客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

Kod Aplikasi

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<h2>验证实例</h2>

<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate>

<p>用户名:<br>
<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>邮箱:<br>
<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>

Jalankan Contoh»

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

	HTML 表单属性 novalidate 用于禁用浏览器默认的验证。

Analisis Contoh

AngularJS ng-model Arahan digunakan untuk mengikat elemen input pada model. Objek model

mempunyai dua sifat: pengguna dan e-mel.

Kami menggunakan perintah ng-show, color:red hanya akan dipaparkan apabila e-mel $dirty atau $invalid.

属性	描述
$dirty	表单有填写记录
$valid	字段内容合法的
$invalid	字段内容是非法的
$pristine	表单没有填写记录

Pengesahan input AngularJS