AngularJS表单和输入验证
2016-07-24 11:12
671 查看
1、AngularJS表单
AngularJS 表单是输入控件的集合。
2、AngularJS 输入验证
AngularJS 表单和控件可以验证输入的数据。
AngularJS 表单是输入控件的集合。
<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>
实例解析 ng-app 指令定义了 AngularJS 应用。 ng-controller 指令定义了应用控制器。 ng-model 指令绑定了两个 input 元素到模型的 user 对象。 formCtrl 函数设置了 master 对象的初始值,并定义了 reset() 方法。 reset() 方法设置了 user 对象等于 master 对象。 ng-click 指令调用了 reset() 方法,且在点击按钮时调用。 novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 验证。 AngularJS 表单和控件可以验证输入的数据。
2、AngularJS 输入验证
AngularJS 表单和控件可以验证输入的数据。
<h2>Validation Example</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>
实例解析 AngularJS ng-model 指令用于绑定输入元素到模型中。 模型对象有两个属性: user 和 email。 我们使用了 ng-show指令, color:red 在邮件是 $dirty 或 $invalid 才显示。
属性 | 描述 |
---|---|
$dirty | 表单有填写记录 |
$valid | 字段内容合法的 |
$invalid | 字段内容是非法的 |
$pristine | 表单没有填写记录 |
相关文章推荐
- Angularjs 跨域请求
- 在线用表单建立文件夹
- Jquery 表单取值赋值的一些基本操作
- C#验证给定字符串是否为数字的方法
- C#实现验证身份证是否合法的方法
- C#验证给定字符串形式日期是否合法的方法
- javascript 表单的友好用户体现
- js 提交和设置表单的值
- 攻克CakePHP系列二 表单数据显示
- ASP.NET MVC5验证系列之Fluent Validation
- js身份证验证超强脚本
- 在ASP.NET 2.0中操作数据之三十九:在DataList的编辑界面里添加验证控件
- 在ASP.NET 2.0中操作数据之十九:给编辑和新增界面增加验证控件
- ASP.NET MVC5验证系列之服务端验证
- 实用jquery操作表单元素的简单代码
- asp身份证验证代码函数
- ASP.NET MVC的四种验证编程方式
- 浅析Bootstrap验证控件的使用
- JavaScript获取页面中表单(form)数量的方法
- EasyUI中在表单提交之前进行验证