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

来源：互联网发布：linux删除整个文件夹编辑：程序博客网时间：2024/06/08 02:47
密码框使我们生活中常见到的情况，这个博客就是设置一个简单的模板进行调用，方便我们以后的工作，新手上路，不喜勿喷。
源代码如下:

<!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>
阅读全文
0 0