AngularJS 输入验证
AngularJS 表单和控件可以验证输入的数据
输入验证
经过前面几章节的学习，我们已经学习了 AngularJS 表单和控件的知识
AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告
<!DOCTYPE html> <meta charset="utf-8"> <link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/> <script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script> <h2>AngularJS 数据验证范例</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> <footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer> <script> var app = angular.module('myApp', []); app.controller('validateCtrl', function($scope) { $scope.user = '李白'; $scope.email = 'li.bai@gmail.com'; }); </script>
HTML 表单属性 novalidate 用于禁用浏览器默认的验证
注意： 客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的
代码分析
-
AngularJS ng-model 指令用于绑定输入元素到模型中
模型对象有两个属性： user 和 email
-
使用 ng-show 指令， color:red 在邮件是 $dirty 或 $invalid 才显示
属性 描述 $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine 表单没有填写记录