<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular-1.5.5/angular.js"></script>
<style>
.a1{
500px;
height: auto;
margin-left: 500px;
}
.a2{
500px;
height: auto;
background: palevioletred;
color: red;
padding: 20px;
}
.red{
border: 1px solid red;
}
</style>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
//$scope.show1=false;
$scope.xia="只显示输入框样式"
$scope.show1=function () {
//console.log($scope.xia)
if($scope.xia=="只显示输入框样式"){
return false;
}else{
return true;
}
}
/* $scope.xia="只显示输入框样式"
if($scope.xia=="只显示输入框样式"){
$scope.show1=false;
}else{
$scope.show1=true;
}*/
$scope.pass1="";
$scope.pass2="";
$scope.show2=true;
$scope.show3=true;
$scope.show4=true;
$scope.show5=false;
$scope.check=false;
$scope.add=function () {
if($scope.pass1.length<=6||$scope.pass2.length<=6){
$scope.show2=true;
}else{
$scope.show2=false;
};
if($scope.pass1==""||$scope.pass2==""){
$scope.show3=true;
}else{
$scope.show3=false;
}
if($scope.pass1!=$scope.pass2){
$scope.show4=true;
}else{
$scope.show4=false;
}
if($scope.show2==true||$scope.show3==true||$scope.show4==true){
$scope.check=true;
}else if($scope.show2==false&&$scope.show3==false&&$scope.show4==false){
$scope.check=false;
$scope.show1=function () {
return false;
}
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div class="a1">
密码：<input type="password" ng-model="pass1" ng-class="{red:check}"><br>
重复密码：<input type="password" ng-model="pass2" ng-class="{red:check}"><br> <div ng-show="show1()" class="a2"> <ul> <li ng-show="show2">密码长度不能小于6个字符！</li> <li ng-show="show3">密码不能为空！</li> <li ng-show="show4">两次密码输入不一致！</li> </ul> </div> <button ng-click="add()">提交</button><br> </div> <span>显示方式</span><br> <select ng-model="xia"> <option>只显示输入框样式</option> <option>显示错误提示</option> </select></body></html>