首页 > 代码库 > AngularJs的一个简单的表单验证

AngularJs的一个简单的表单验证

2024-09-02 10:15:14   217人阅读

最近学习了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="http://www.mamicode.com/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="http://www.mamicode.com/Next" ng-disabled="(login.username.$dirty && login.username.$invalid)||(login.useremail.$dirty&&login.useremail.$invalid)">
39         </div>
40     </form>
41 </body>
42 </html>

 

AngularJs的一个简单的表单验证


联系
我们