AngularJS 输入验证

يمكن للنماذج والتحكمات في AngularJS التحقق من بيانات المدخلات.

تحقق من المدخلات

في الفصول القديمة، لقد تعلمت عن AngularJS النماذج والتحكمات.

يمكن لتكوين AngularJS الأشكال واللوحات تقديم وظائف التحقق، وتحذير المستخدم من البيانات غير الصالحة المدخلة.

التحقق على الجانب客户端不能保证用户输入数据的安全性，所以 التحقق على الجانب الخادم هو ضروري أيضًا.

كود التطبيق

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/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　=　'[email protected]';
});
</script>
</body>
</html>

测试看看 ‹/›

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

示例解析

AngularJS 　ng-model 指令用于绑定输入元素到模型中。

模型对象有两个属性： user 和 email。

我们使用了 ng-show指令， color:red 在邮件的 $dirty 或 $invalid 都为 true 时才显示。

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

AngularJS 参考手册 AngularJS 事件

دليل AngularJS الأساسي

AngularJS 输入验证

تحقق من المدخلات

كود التطبيق

示例解析