<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#ts {
width: 148px;
}
</style>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script>
flag = false;
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
//只有输入框样式变化
$scope.sel1 = function() {
$scope.sub = function() {
if($scope.text1 == $scope.text2) {
alert("提交成功");
$(function() {
$("input").css("border-color", "black");
});
} else {
$(function() {
$("input").css("border-color", "red");
});
}
}
}
//显示错误提示
$scope.sel2 = function() {
$scope.sub = function() {
if($scope.text1 == $scope.text2 && $scope.text1.length >= 6 && $scope.text2.length >= 6) {
alert("提交成功");
$(function() {
$("input").css("border-color", "black");
$("#ts").html("");
});
} else {
$(function() {
$("input").css("border-color", "red");
if($scope.text1.length < 6 && $scope.text2.length < 6 && $scope.text1 != $scope.text2) {
$("#ts").css("background-color", "pink");
$("#ts").html("<li>密码长度不能小于6个字符!</li><li>密码不能为空!</li><li>两次密码输入不一致!</li>");
} else if($scope.text1 != $scope.text2) {
$("#ts").css("background-color", "pink");
$("#ts").html("<li>两次密码输入不一致</li>");
} else if($scope.text1.length < 6 && $scope.text2.length < 6) {
$("#ts").css("background-color", "pink");
$("#ts").html("<li>密码长度不能小于6个字符!</li>");
}
});
}
}
}
//点击提交才显示错误提示
$scope.sel3 = function() {
$scope.sub = function() {
if($scope.text1 == $scope.text2 && $scope.text1.length >= 6 && $scope.text2.length >= 6) {
alert("提交成功");
$(function() {
$("input").css("border-color", "black");
$("#ts").html("");
});
} else {
$(function() {
$("input").css("border-color", "red");
if($scope.text1.length < 6 && $scope.text2.length < 6 && $scope.text1 != $scope.text2) {
$("#ts").css("background-color", "pink");
$("#ts").html("<li>密码长度不能小于6个字符!</li><li>两次密码输入不一致!</li>");
} else if($scope.text1 != $scope.text2) {
$("#ts").css("background-color", "pink");
$("#ts").html("<li>两次密码输入不一致</li>");
} else if($scope.text1.length < 6 && $scope.text2.length < 6) {
$("#ts").css("background-color", "pink");
$("#ts").html("<li>密码长度不能小于6个字符!</li>");
}
});
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div style="margin-left: 10%;">
<p style="margin-left: 2.5%;">密码:<input type="password" placeholder="6-20个字符" ng-model="text1" /></p>
<p>重复密码:<input type="password" placeholder="6-20个字符" ng-model="text2" /></p>
<p id="ts" style="margin-left: 5.5%;"></p>
<button ng-click="sub()" style="margin-left: 5.5%;">提交</button>
</div>
显示方式:<br />
<select>
<option selected="selected">--请选择--</option>
<option ng-click="sel1()">只有输入框样式变化</option>
<option ng-click="sel2()">显示错误提示</option>
<option ng-click="sel3()">点击提交才显示错误提示</option>
</select>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#ts {
width: 148px;
}
</style>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script>
flag = false;
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
//只有输入框样式变化
$scope.sel1 = function() {
$scope.sub = function() {
if($scope.text1 == $scope.text2) {
alert("提交成功");
$(function() {
$("input").css("border-color", "black");
});
} else {
$(function() {
$("input").css("border-color", "red");
});
}
}
}
//显示错误提示
$scope.sel2 = function() {
$scope.sub = function() {
if($scope.text1 == $scope.text2 && $scope.text1.length >= 6 && $scope.text2.length >= 6) {
alert("提交成功");
$(function() {
$("input").css("border-color", "black");
$("#ts").html("");
});
} else {
$(function() {
$("input").css("border-color", "red");
if($scope.text1.length < 6 && $scope.text2.length < 6 && $scope.text1 != $scope.text2) {
$("#ts").css("background-color", "pink");
$("#ts").html("<li>密码长度不能小于6个字符!</li><li>密码不能为空!</li><li>两次密码输入不一致!</li>");
} else if($scope.text1 != $scope.text2) {
$("#ts").css("background-color", "pink");
$("#ts").html("<li>两次密码输入不一致</li>");
} else if($scope.text1.length < 6 && $scope.text2.length < 6) {
$("#ts").css("background-color", "pink");
$("#ts").html("<li>密码长度不能小于6个字符!</li>");
}
});
}
}
}
//点击提交才显示错误提示
$scope.sel3 = function() {
$scope.sub = function() {
if($scope.text1 == $scope.text2 && $scope.text1.length >= 6 && $scope.text2.length >= 6) {
alert("提交成功");
$(function() {
$("input").css("border-color", "black");
$("#ts").html("");
});
} else {
$(function() {
$("input").css("border-color", "red");
if($scope.text1.length < 6 && $scope.text2.length < 6 && $scope.text1 != $scope.text2) {
$("#ts").css("background-color", "pink");
$("#ts").html("<li>密码长度不能小于6个字符!</li><li>两次密码输入不一致!</li>");
} else if($scope.text1 != $scope.text2) {
$("#ts").css("background-color", "pink");
$("#ts").html("<li>两次密码输入不一致</li>");
} else if($scope.text1.length < 6 && $scope.text2.length < 6) {
$("#ts").css("background-color", "pink");
$("#ts").html("<li>密码长度不能小于6个字符!</li>");
}
});
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div style="margin-left: 10%;">
<p style="margin-left: 2.5%;">密码:<input type="password" placeholder="6-20个字符" ng-model="text1" /></p>
<p>重复密码:<input type="password" placeholder="6-20个字符" ng-model="text2" /></p>
<p id="ts" style="margin-left: 5.5%;"></p>
<button ng-click="sub()" style="margin-left: 5.5%;">提交</button>
</div>
显示方式:<br />
<select>
<option selected="selected">--请选择--</option>
<option ng-click="sel1()">只有输入框样式变化</option>
<option ng-click="sel2()">显示错误提示</option>
<option ng-click="sel3()">点击提交才显示错误提示</option>
</select>
</body>
</html>