HTML js使boeder变色

最新推荐文章于 2024-10-26 13:53:01 发布

潜水断桥

最新推荐文章于 2024-10-26 13:53:01 发布

阅读量256

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/qq_37454196/article/details/78851082

HTML 专栏收录该内容

20 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/anglarjs.min.js"></script>
		<script src="js/angular-route.js"></script>
		<script src="js/jquery-1.11.0.js"></script>
		
		<style>
			
		</style>
		
		<script>
			
			var liu = angular.module("app",[]);
			liu.controller("democ",["$scope",function(a){
				var flag_length = true;
				var flag_xiangtong = true;
				var flag_null = true;
				a.type = "1";
				a.show = false;
				
				a.save = function(){
					
					if(a.pass_one == ""|| a.pass_one == undefined){
						a.errors.push("请输入密码");
						$("#pass").css("border-color","red");
						$("#pwd").css("border-color","red");
					}
					
					a.errors = [];
					if(!flag_null){
						a.errors.push("密码不能为空");
					}
					if(!flag_length){
						a.errors.push("密码长度要在6到20之间");
					}
					if(!flag_xiangtong){
						a.errors.push(("两次密码不相同"));
					}
					
					if(!flag_length||!flag_null||!flag_xiangtong){
						$("#pass").css("border-color","red");
						$("#pwd").css("border-color","red");
					}else{
						$("#pass").css("border-color","");
						$("#pwd").css("border-color","");
					}
				
				}
				
				a.panduan = function(){
					
					if(a.pass_one == "" || a.pass_one == undefined){
						
						flag_null = false;
						flag_length = false;
						
					}else{
						flag_null = true;
					}
					
					
					if(a.pass_one.length<6 || a.pass_one.length>20 ){
						flag_length = false;
					}else{
						flag_length = true;
					}
						
					if(a.pass_one == a.pass_two){
						flag_xiangtong = true;
					}else{
						flag_xiangtong = false;
					}
					
					
					
					
					if(a.type != "3"){
						
						a.errors = [];
						if(!flag_null){
							a.errors.push("密码不能为空");
						}
						if(!flag_length){
							a.errors.push("密码长度要在6到20之间");
						}
						if(!flag_xiangtong){
							a.errors.push(("两次密码不相同"));
						}
						
						if(!flag_length||!flag_null||!flag_xiangtong){
							$("#pass").css("border-color","red");
							$("#pwd").css("border-color","red");
						}else{
							$("#pass").css("border-color","");
							$("#pwd").css("border-color","");
						}
					}
					
					
				}
				
			}]);
			
		</script>
	</head>
	
	<body ng-app="app" ng-controller="democ">
		密码<input type="password" placeholder="6-20个字符" ng-model="pass_one" ng-blur="panduan()" id="pass" />
		<br />
		重复密码<input type="password" placeholder="再次输入密码" ng-model="pass_two" ng-blur="panduan()" id="pwd" />
		<br />
		<input type="button" style="background: greenyellow;" value="提交" ng-click="save()" />
		<br />
		<div ng-show="type!=1">
			<ul>
				<li ng-repeat="a in errors">{{a}}</li>
			</ul>
		</div>
		<hr />
		显示方式
		<br />
		<select ng-model="type">
			<option value="1">只有输入框样式变化</option>
			<option value="2">显示错误提示</option>
			<option value="3">点击提交后才显示错误提示</option>
		</select>
	</body>
</html>