<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="https://www.jb51.net/libs/bootstrap.css" /> <style type="text/css"> *{ margin: 10px; } </style> </head> <body ng-app="app" ng-controller="ctrl"> <input type="checkbox" ng-model="mySwitch">是否同意我是帅哥！ </label> <button ng-disabled="!mySwitch">点我!</button> <p></p> <label> <input type="checkbox" ng-model="mySwitch1">是否显示？ </label> <button ng-show="mySwitch1">点我!</button> <p></p> <label> <input type="checkbox" ng-model="mySwitch2">是否隐藏？ </label> <button ng-hide="mySwitch2">点我!</button> <p></p> <button ng-click="count = count + 1">点我！</button> <p>{{ count }}</p> <button ng-click="func()">说一下感想吧！</button> </body> <script src="https://www.jb51.net/libs/angular.js"></script> <script> angular.module("app",[]) .controller("ctrl",function($scope,$rootScope){ $scope.count = 10; $scope.func = function(){ alert("我弹了一个窗！"); } }) </script> </html>
八、Angular表单和输入验证
[AngularJS中的表单验证]
1、表单中，常用的验证操作：
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
$error 表单验证不通过的错误信息
2、验证时，需给表单，及需要验证的input，设置name属性：
给form及input设置name后，会将form表单信息，默认绑定到$scope作用域中。故，可以使用 formName.inputName.$验证操作 得到验证结果：
例如：formName.inputName.$dirty = "true" 表单被填写过
formName.inputName.$invalid = "true" 表单输入不合法
formName.inputName.$error.required = "true" 表单必填但未填
$error支持的验证有：required/minlength/maxlength/pattern/email/number/date/url等。。。
3、为避免冲突，例如使用type="email"时，H5也会进行验证操作。如果只想使用AngularJS验证，可以使用<form novalidate></form>属性，禁用H5自带验证功能；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="https://www.jb51.net/libs/bootstrap.css" /> <style type="text/css"> .row{ margin-bottom: 10px; } .row .col-xs-5{ text-align: center; } .suc{ border-color: #3c763d; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } .suc:focus{ border-color: #2b542c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168; } .err{ border-color: #a94442; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } .err:focus{ border-color: #843534; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483; } </style> </head> <body ng-app="app" ng-controller="ctrl"> <div> <div> <div> <div> 用户注册 </div> </div> <div> <form action="" method="get" novalidate> <div > <div> 用户名： </div> <div> <input type="text" ng-model="user.name" ng-minlength="4" ng-maxlength="10" required ng-class="{suc:myForm.name.$valid && myForm.name.$dirty,err:myForm.name.$invalid && myForm.name.$dirty}"/> <p ng-show="myForm.name.$invalid && myForm.name.$dirty"> <!--当有填写记录且不合法时，p显示--> <span ng-show="myForm.name.$error.required">用户名必须填写！！！</span> <span ng-show="myForm.name.$error.minlength">用户名最少包含4个字符！！！</span> <span ng-show="myForm.name.$error.maxlength">用户名最多包含10个字符！！！</span> </p> </div> </div> <div> <div> 邮箱： </div> <div> <input type="email" ng-model="user.mail" required ng-class="{suc:myForm.mail.$valid && myForm.mail.$dirty,err:myForm.mail.$invalid && myForm.mail.$dirty}"/> <p ng-show="myForm.mail.$invalid && myForm.mail.$dirty"> <!--当有填写记录且不合法时，p显示--> <span ng-show="myForm.mail.$error.required">邮箱必须填写！！！</span> <span ng-show="myForm.mail.$error.email">邮箱格式不合法！！！</span> </p> </div> </div> <div> <div> 密码： </div> <div> <input type="password" ng-model="user.pwd" pattern="^\w{6,18}$" required ng-class="{suc:myForm.pwd.$valid && myForm.pwd.$dirty,err:myForm.pwd.$invalid && myForm.pwd.$dirty}"/> <p ng-show="myForm.pwd.$invalid && myForm.pwd.$dirty"> <!--当有填写记录且不合法时，p显示--> <span ng-show="myForm.pwd.$error.pattern">密码应为6-18位，且只能为字母、数字、下划线</span> </p> </div> </div> <div> <div> 确认密码： </div> <div> <input type="password" ng-model="rePwd" required ng-class="{suc:myForm.rePwd.$dirty&&rePwd==user.pwd,err:myForm.rePwd.$dirty&&rePwd!=user.pwd}"/> <p ng-show="myForm.rePwd.$dirty && rePwd!=user.pwd"> <!--当有填写记录且不合法时，p显示--> 两次密码输入不一致！！！ </p> </div> </div> <div> <div> <input type="submit" value="注册" ng-disabled="myForm.$invalid || rePwd!=user.pwd" /> </div> <div> <input type="button" value="重置" ng-click="resets()" /> </div> </div> </form> </div> </div> <pre> {{user.pwd}} </pre> </div> </body> <script src="https://www.jb51.net/libs/angular.js"></script> <script> $scope.resets = function(){ $scope.user = angular.copy($scope.initUser); } $scope.resets(); }) </script> </html>