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

最新推荐文章于 2021-04-19 22:22:33 发布

Aiarron

最新推荐文章于 2021-04-19 22:22:33 发布

阅读量329

点赞数 1

分类专栏：学习经验总结文章标签： angular

本文链接：https://blog.csdn.net/Aiarron/article/details/52246260

版权

学习经验总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近身边人都在学习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”也要加上。这往往是我最容易忘记的地方