AngularJs1学习笔记：AngularJS 输入验证和事件_angluar 输入完成事件

一：AngularJs1学习笔记:指令

上篇看完angular的指令现在看一下他的指令和验证。这里的验证的对象是input。

事件

ng-click

表示点击事件
绑定点击事件

<button id="butLogin" ng-click="login()">登录</button>
1

  $scope.login =function(){
     alert("哈哈哈");
    }
1
2
3

ng-dblclick

表示双击事件

ng-submit

form表单提交

ng-hide ng-show ng-if

控制控件的显示和隐藏

    <button id="butLogin" ng-click="login()">登录</button>
    <button id="butRegister" ng-hide="hide">注册</button>
    <button id="butForget" ng-show="show">忘记密码</button>

    <button  ng-if="show">ng-if="show"</button>


    <button  ng-if="ifTag">ng-if="ifTag"</button>
1
2
3
4
5
6
7
8
9

 var ifTag = true;
 var app = angular.module("myApp", []);
 app.controller("MyController", function ($scope) {
    $scope.ifTag= ifTag;
    $scope.login =function(){
      $scope.hide=!$scope.hide;
      $scope.show=$scope.hide;
      $scope.ifTag=!$scope.ifTag;
    }
  });
1
2
3
4
5
6
7
8
9
10

ng-hide和ng-if都可以让控件进行隐藏和显示，那他们的区别是什么呢。可以先看下面这2个图：

可以发现，当ng-hide=”true”和ng-show=”false”的时候，在这里控件还是可以看见的存在的，但是当ng-if=“false”的时候，从截图中可以看到代码已经被注释了，那么到时候bom解析的时候就会忽略这个。

表单验证

一般当我们使用表单输入的内容的时候，都要进行验证，比如是否为空，是否是合格的手机号，身份证号或者长度是否是多少位，也有是否满足什么6-16位字符串等。java中我一般就是获取输入的内容然后正则表达式判断。在angularjs中验证内容是否存在或者内容是否满足某些条件又是怎么实现的呢？

required

表示为必填项

<form class="formLogin"  name="myForm">
<p>username：<input type="text" name="user" ng-model="username" required/></p>
<p>password：<input type="password" name="pass" ng-model="password" required/></p>


<span ng-show="myForm.user.$error.required">用户名是必须的。</span>   <span ng-show="myForm.pass.$error.required">密码是必须的。</span>
</form>
1
2
3
4
5
6
7

invalid& valid&pristine&dirty

    <p>eamiladdress：<input type="email" name="email" ng-model="email" required/></p>
    <span ng-show="myForm.email.$pristine">$pristine</span>
    <span ng-show="myForm.email.$dirty">$dirty</span>
    <span ng-show="myForm.email.$invalid">$invalid</span>
    <span ng-show="myForm.email.$valid">$valid</span>
1
2
3
4
5

总结:
$invalid 和$valid分别表示内容是否非法，内容是否合法。，非法的时候input不会显示内容。

$dirty 和$pristine分别表示表单改动和表单内容未改动。这2个只会输出一遍。
比如我们要在表单内容改变并且输入内容不合法的状态下进行提示，可以这样写

<span style="background-color: #009999" ng-show="myForm.email.$dirty&&myForm.email.$invalid">
     表单内容改动并且输入不合法
</span>
1
2
3

novalidate

不引用浏览器本身的检测，如下图我们讲内容清空进行提交的时候，会弹出一个浏览器自带的提示，你要是不想要，就可以在form上加上这个属性

  <form class="formLogin"  name="myForm" novalidate >
1

以上，不对的地方请指出非常感谢。