码迷,mamicode.com
首页 > Web开发 > 详细

AngularJs的一个简单的表单验证

时间:2017-01-25 23:05:14      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:led   text   val   nbsp   har   min   没有   logs   lang   

最近学习了AngularJs框架,觉得确实特别有用。之前学习了一点点的ASP.NET,它的控件也是挺好的,不过还是没有AngularJs轻巧。

定义一个应用程序myApp,一个控制器。接着是表单的验证。

AngularJs中,表单控件的HTML元素有:input select button textarea元素

其实还算是很简单的例子。

不过我觉得对比起ASP那种庞大的控件来说,它确实很轻巧。

 

AngularJS 输入验证
$dirty    表单有填写记录
$valid    字段内容合法的
$invalid   字段内容是非法的
$pristine   表单没有填写记录

原来这四个值是不知道怎么使用,后来发现,结合表单使用。

我觉得特别有意思的是最后那个提交按钮的disabled的属性,如果两个输入框中任何一个没有填写或者没有填写正确,都是不可用状态。

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单验证的例子</title>
 6     <script src="js/angular.min.js"></script>
 7     <script>
 8         var app=angular.module(‘myApp‘,[]);
 9         app.controller(‘validCtrl‘,function($scope){
10             $scope.username="SliyCat";
11             $scope.useremail="123@qq.com"
12         });
13     </script>
14 </head>
15 <body>
16     <form ng-app="myApp" ng-controller="validCtrl" name="login">
17         <p>用户注册</p>
18         <div>
19             <label>UserName:</label>
20             <input type="text" name="username" ng-model="username" required>
21             <span ng-show="login.username.$dirty && login.username.$invalid">
22                 <span ng-show="login.username.$error.required">用户名不能为空</span>
23             </span>
24         </div>
25         <div>
26             <label>Email:</label>
27             <input type="email" name="useremail" ng-model="useremail" required>
28             <span ng-show="login.useremail.$dirty&&login.useremail.$invalid">
29                 <span ng-show="login.useremail.$error.required">
30                     邮箱不能为空
31                 </span>
32                 <span ng-show="login.useremail.$error.email">
33                     非法格式
34                 </span>
35             </span>
36         </div>
37         <div>
38             <input type="submit" name="okey" value="Next" ng-disabled="(login.username.$dirty && login.username.$invalid)||(login.useremail.$dirty&&login.useremail.$invalid)">
39         </div>
40     </form>
41 </body>
42 </html>

 

AngularJs的一个简单的表单验证

标签:led   text   val   nbsp   har   min   没有   logs   lang   

原文地址:http://www.cnblogs.com/synchronize/p/6350188.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!