上篇看完angular的指令现在看一下他的指令和验证。这里的验证的对象是input。
事件
ng-click
表示点击事件
绑定点击事件
<button id="butLogin" ng-click="login()">登录</button>
$scope.login =function(){
alert("哈哈哈");
}
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>
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;
}
});
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>
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>
总结:
invali@H_993_404@d和 valid分别表示内容是否非法,内容是否合法。,非法的时候input不会显示内容。
dirty和 pristine分别表示表单改动和表单内容未改动。这2个只会输出一遍。
比如我们要在表单内容改变并且输入内容不合法的状态下进行提示,可以这样写
<span style="background-color: #009999" ng-show="myForm.email.$dirty&&myForm.email.$invalid">
表单内容改动并且输入不合法
</span>
novalidate
不引用浏览器本身的检测,如下图我们讲内容清空进行提交的时候,会弹出一个浏览器自带的提示,你要是不想要,就可以在form上加上这个属性
<form class="formLogin" name="myForm" novalidate >
以上,不对的地方请指出非常感谢。