AngularJS表单验证开发(相关语法)（一）

来源：互联网发布：hazeover for mac 编辑：程序博客网时间：2024/06/07 01:32

最近身边人都在学习angularjs，这个框架我以前看过。但是不是很熟练。现在通过一些网站学习。现在表单验证用angularjs是非常智能化和非常好用的。所以记录我所学的。
学习的重点：
a 域$scope在angular中的意义
b 掌握angular基础指令
c 动态验证表单
（1）ng-model
html+css代码片段：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <title>anglarjs</title>    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>    <script src="js/main.js"></script></head><body ng-app='myApp'>    <input type="text" ng-model='name' />    <p>{{name}}</p></body></html>

注意我们的js部分要定义：

angular.module('myApp',[])

（2）ng-maxlenght和ng-minlenght的用法
其实这两个的用法需要注意。当你符合其条件是。他才有相应的提示。比如：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <title>anglarjs</title>    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>    <script src="js/main.js"></script></head><body ng-app='myApp'>    <input type="text" ng-model='name' ng-minlength="3" ng-maxlength="5" />    <p>{{name}}</p></body></html>`

需要注意的是。当你的长度满足最小的长度是。它p标签的值才会变。不然它不提示。
（3）ng-submit和ng-class

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <title>anglarjs</title>    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>    <script src="js/main.js"></script>    <style>        .error{            border:1px solid #f00;        }    </style></head><body ng-app='myApp' ng-controller="Main">    <form name="myForm" ng-submit="Main()">        <div class="form-about">            <label>用户名：</label>            <input name="username"ng-model="username" ng-class="{'error':myForm.username.$invalid && myForm.username.$touched}" class="form-control" ng-minlength="4" required  />        </div>    </form></body></html>

script部分

//方法.controller('Main',function($scope){    $scope.submitForm=function(){        console.log("表单提交了");    }})

这里需要解释一下。不然怕以后自己都忘记了。
1、必须要定义一个方法。参数必须要有域
2、定义了一个error类名。是为了验证是否符合input
3、required 必须要加上
4、myForm.username.invalid && myForm.username.touched
要同时满足两个情况。一是$invalid，二是触碰后的。后者没加，往往会有用户体验效果不好。
5、ng-model=”username”也要加上。这往往是我最容易忘记的地方

1 0