您的位置：首页 > 其它

密码框内容的各种展示情况

2017-10-24 18:48 183 查看

密码框使我们生活中常见到的情况，这个博客就是设置一个简单的模板进行调用，方便我们以后的工作，新手上路，不喜勿喷。

源代码如下:

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title>密码框的内容校验</title>
<script type="text/javascript" src="angular-1.3.0.js"></script>
<script type="text/javascript" src="angular-route.js" ></script>
<script type="text/javascript" src="jquery.1.12.4.js"></script>
<style type="text/css">
#button{
background: green;
color: aliceblue;
width: 60px;
height: 40px;
font-size: 16px;
}
#div1{
width: 300px;
height: 100px;
margin: auto;
}
</style>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.erro_show = false;
$scope.l1 = false;
$scope.l2 = false;
$scope.l3 = false;
var button = document.getElementById("button");
button.disabled=true;
$scope.select = function(){
if($scope.style_value==1){
button.disabled=true;
$scope.my_style ={
"border":"1px solid red"
}
}else if($scope.style_value==2){
button.disabled=true;
$scope.my_style ={
"border":"1px solid black"
}
$scope.erro_show = true;
$scope.l1 = true;
$scope.l2 = true;
$scope.l3 = true;
}else if($scope.style_value==3){
button.disabled=false;
$scope.my_style ={
"border":"1px solid black"
}
$scope.erro_show = false;
$scope.l1 = false;
$scope.l2 = false;
$scope.l3 = false;
$scope.sub = function(){
var psw = $scope.psw;
var psw1 = $scope.psw1;
if(psw!=null&&psw1!=null){
if(psw.length>=6&&psw1.length>=6){
if(psw==psw1){
$("input").css({"border":"1px solid black"});
$scope.erro_show = false;
alert("提交成功");
$scope.psw="";
$scope.psw1="";
}else{
$scope.erro_show = true;
$scope.l3 = true;
$("input").css({"border":"1px solid red"});
}
}else{
$scope.erro_show = true;
$scope.l1 = true;
$("input").css({"border":"1px solid red"});
}
}else{
$scope.erro_show = true;
$scope.l2 = true;
$("input").css({"border":"1px solid red"});
}

}
}
}

});
</script>
</head>
<body ng-controller="myCtrl">
<div id="div1">
密码：<input type="password" placeholder="6-20个字符" ng-model="psw" ng-style="my_style"><br>
重复密码：<input type="password" placeholder="再次输入密码" ng-model="psw1" ng-style="my_style"><br>
<div ng-show="erro_show" style="width: 300px;height: 100px;background: lightpink">
<ul style="color: lightcoral">
<li ng-show="l1">密码长度不能小于6个字符</li>
<li ng-show="l2">密码不能为空</li>
<li ng-show="l3">两次密码输入不一致</li>
</ul>
</div>
<input type="button" value="提交" ng-click="sub()" id="button">
</div>
<div id="div2">
<p>显示方式</p>
<select ng-model="style_value" ng-change="select()">
<option value="">显示方式</option>
<option value="1">只有输入框样式变化</option>
<option value="2">显示错误提示</option>
<option value="3">点击提交才显示错误提示</option>
</select>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航