<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> <style> button{ background-color: greenyellow; color: white; } div{ width: 300px; background-color: pink; } </style> <script src="../js/angular.min.js"></script> <script src="../js/jquery-1.11.1.js"></script> <script> angular.module("myapp",[]) .controller("deomc",function($scope){ $scope.save=function(){ //存放错误信息的数组 $scope.erro_arr=[]; //密码框1 if($scope.pwd==undefined || $scope.pwd==""){ $scope.erro_arr.push("密码不能为空"); $("#pwd").css("border-color","red"); }else if($scope.pwd.length<6){ $scope.erro_arr.push("密码长度不能小于6位"); $("#pwd").css("border-color","red"); }else{ $("#pwd").css("border-color",""); } //密码框2 if($scope.pwd2==undefined || $scope.pwd2==""){ $scope.erro_arr.push("确认密码不能为空"); $("#pwd2").css("border-color","red"); }else if($scope.pwd!=$scope.pwd2){ $scope.erro_arr.push("密码输入不一致"); $("#pwd").css("border-color","red"); $("#pwd2").css("border-color","red"); }else{ $("#pwd").css("border-color",""); $("#pwd2").css("border-color",""); } if($scope.erro_arr.length==0){ alert("添加成功"); } } $scope.aa=function(){ var sty= $scope.sty; if(sty==1){ console.log("只有边框变化"); }else if(sty==2){ console.log("显示错误提示"); } }})
</script> </head> <body ng-app="myapp" ng-controller="deomc"> 密 码:<input type="password" ng-model="pwd" id="pwd" /> <br /> 确认密码:<input type="password" ng-model="pwd2" id="pwd2" /><br /> <div ng-show="sty==2"> <ul> <li ng-repeat="a in erro_arr">{ {a}}</li> </ul> </div> <select ng-click="aa()" ng-model="sty"> <option value="1">只有输入框样式变化</option> <option value="2">显示错误提示</option> </select> <button ng-click="save()">提交</button> </body></html>