AngularJs的一个简单的表单验证
Posted 夏时未祭
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJs的一个简单的表单验证相关的知识，希望对你有一定的参考价值。
最近学习了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="[email protected]" 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的一个简单的表单验证的主要内容，如果未能解决你的问题，请参考以下文章