AngularJS 输入验证详解及实例代码
AngularJS输入验证
AngularJS表单和控件可以验证输入的数据。
输入验证
在前面的几个章节中，你已经学到关于AngularJS表单和控件的知识。
AngularJS表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。
注意： 客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。
应用代码
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<h2>验证实例</h2>
<formng-app="myApp"ng-controller="validateCtrl"
name="myForm"novalidate>
<p>用户名:<br>
<inputtype="text"name="user"ng-model="user"required>
<spanstyle="color:red"ng-show="myForm.user.$dirty&&myForm.user.$invalid">
<spanng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>
<p>邮箱:<br>
<inputtype="email"name="email"ng-model="email"required>
<spanstyle="color:red"ng-show="myForm.email.$dirty&&myForm.email.$invalid">
<spanng-show="myForm.email.$error.required">邮箱是必须的。</span>
<spanng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>
<p>
<inputtype="submit"
ng-disabled="myForm.user.$dirty&&myForm.user.$invalid||
myForm.email.$dirty&&myForm.email.$invalid">
</p>
</form>
<script>
varapp=angular.module('myApp',[]);
app.controller('validateCtrl',function($scope){
$scope.user='JohnDoe';
$scope.email='john.doe@gmail.com';
});
</script>
</body>
</html>
运行结果：
验证实例
用户名:
邮箱:
注意： HTML表单属性novalidate用于禁用浏览器默认的验证。
实例解析
AngularJSng-model指令用于绑定输入元素到模型中。
模型对象有两个属性：user和email。
我们使用了ng-show指令，color:red在邮件是$dirty或$invalid才显示。
属性
描述
$dirty
表单有填写记录
$valid
字段内容合法的
$invalid
字段内容是非法的
$pristine
表单没有填写记录
以上就是对AngularJS输入验证的资料整理，后续继续补充，希望能帮助学习的同学。