AngularJs实现密码框的内容校验

缺乏、安全感 2022-06-05 22:07 141阅读 0赞

用AngularJs实现下图效果。

**要求：**实现密码框的内容校验，并实现下拉列表的所列的展示形式。

具体看下图效果

**1.页面初始效果**

**![Center][]**

2.两次密码不一致时的效果

![Center 1][]

3.当显示方式修改为显示错误提示时，详细的内容错误提示

![Center 2][]

![Center 3][]

4.当显示方式为提交时才显示的效果

![Center 4][]

点击按钮后

![Center 5][]

**源码：**

<!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-3.2.1.min.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>

[Center]: /images/20220606/2c67fa052d174e248168238392a12f2b.png
[Center 1]: /images/20220606/3aa65546f3354eee96c753416c80bd5d.png
[Center 2]: /images/20220606/4e1e3c79a3124e0690e257d22fc333b6.png
[Center 3]: /images/20220606/6f95db94201847dd951c2ebeb337351f.png
[Center 4]: /images/20220606/4ff03d334dca45bb9faad864e3fbb134.png
[Center 5]: /images/20220606/5990ad21661241169b81ba00c8f3269e.png