angular表单验证笔记篇

来源：互联网发布：防arp攻击软件编辑：程序博客网时间：2024/05/16 08:41

一，angular基础指令（笔记见本地新加卷盘）
na-mode指令。

<body ng-app="myApp"><!-- 简单部署ngmyApp， -->    <input ng-model="name">    <div class="red">{{name}}</div>     <h1>{{name}},小明</h1>    <div>{{name}}</div>

二，
ng-minlength最小长度
ng-maxlength最大长度

<input  class="form-control"         ng-model="name"         type="text"         ng-minlength="4"         ng-maxlength="10">

三，ng-submit和ng-class
①ng-class主要运用于需要动态类名的标签上
②ngclass中是类似于对象的方法,一旦表单signUpForm中的用户名不合法或者触发输入框时，触发ng-class，后自动添加到input后显示,必须添加ng-model才会触发，ngmodel是用户输入的容器

<body ng-app="myApp"><!-- 简单部署ngmyApp， -->    <input ng-model="name">    <div class="red">{{name}}</div>     <h1>{{name}},小明</h1>    <div>{{name}}</div>

二，
ng-minlength最小长度
ng-maxlength最大长度

<input  class="form-control"         ng-model="name"         type="text"         ng-minlength="4"         ng-maxlength="10">

<form name="signUpForm" ng-submit="submitForm()"><!-- submit提交，此处表单提交会触发submitForm()方法 -->        <div class="form-group">            <label>用户名：</label>            <input name="username"                     ng-model="username"                    ng-class="{'error':signUpForm.username.$invalid &&                                signUpForm.username.$touched}"                     ng-minlength="4"                    required                     class="form-control"</div>

四：ng-if指令
①ng-if主要用于条件的判断。ng-if后是需要判断的条件，条件满足执行结果

<div ng-if="signUpForm.username.$invalid &&                    signUpForm.username.$touched">您的输入有误请检查</div>            <div ng-if="signUpForm.username.$valid &&signUpForm.username.$touched">Lorem ipsum dolor sit amet.</div>

五，ng-disabled指令
ng-disabled用于禁用化的部分,后边跟条件。

<botton type="submit" class="btn btn-primary" ng-disabled="signUpForm.$invalid">提交</botton>如果整个表单用户输入有任意不合法，禁用提交按钮，

也可以用于多个input标签输入间的判断：

<input name="username"     ng-model="username"    ng-class="{'error':signUpForm.username.$invalid &&                                signUpForm.username.$touched}"             ng-minlength="4"            required                ng-disabled="signUpForm.username.$valid"            class="form-control"<input name="username2"         ng-model="username2"        ng-class="{'error':signUpForm.username.$invalid &&                                signUpForm.username.$touched}"                 ng-minlength="4"                required                 class="form-control">

一，创建和部署controller

①首先创建.controller(controller的名称，回调函数），

第一项是controller的名称，

第二项是function回调函数，回调函数里传参$scope,用scope来作为Dom里边的域。

在$scope域里有一个userdata，我们最后所有的表单数据都存在于userdata里。

$scope里的submitForm的方法用于一旦表单被提交，该如何处理执行。

②把ng-controller和ng-app写在同一级，表单内的所有的域，都在scope作用之内。

二，传入用户数据和创建验证规则

密码确认验证：

angular本身没有字符串的对比指令，所有可以创建一个新的对比指令。

①创建对比，和第一次用户输入的数据进行匹配。

compare=”userdata.password”

js代码中创建：

.directive(‘compare’,function(){

var o={};//给一个空对象，用来接受返回的数据o.strict='AE';//给一个属性，他的命令是作用在元素和属性上o.strict={    orgText:'=compare'

}

o.require='ngModel';o.link=function(sco,ele,att,con){//主函数，传参（域，元素，属性，ng-model）    con.$validators.compare=function (v) {//给validators一个compare的方法，回调函数内传入用户输入的 值，        return v==sco.orgText;//此处验证之前输入的值和新输入的值是否一致    }   sco.$watch('orgText',function () {//watch是angular中的数据双向绑定事件    con.$validate();//一旦输入有变，开始验证})

}

return o;

})

三，显示错误信息和通过信息。

网页字体库网址：fortawesome，是目前相对稳定的字体库。

网址：github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css

四，总结：

1，控制器的意义：

2，指令的意义

3，表单验证的意义

4，docs.angularjs.org

控制器的意义：

控制器（controller）是一个分发者，处理一些临时数据以及对域进行划分，

指令的意义：

指令compare，可以用在确认密码块，指令可以重复使用。

在页面中重复出现的元素，而且这个元素背后有一定的功能，就可以用指令写出来。

表单验证的意义：

实质就是验证数据的真实性和可靠性，

网站angularjs.org/api中的API Reference中包含angular几乎所有的内容，指令方法等。

0 0