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

用AngularJs实现下图效果。

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

具体看下图效果

1.页面初始效果

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

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

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

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

点击按钮后

源码：

<!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>

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

相关推荐