angularJS密码输入

最新推荐文章于 2023-03-08 09:37:21 发布

gh323093

最新推荐文章于 2023-03-08 09:37:21 发布

阅读量883

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/gh323093/article/details/78602480

版权

Web前端专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jquery-1.11.1/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="../angular-1.5.5/angular.min.js"></script>
    <script type="text/javascript" src="../angular-1.5.5/angular-route.js"></script>
    <style>
        *{
            margin-top: 8px;
        }
        .ann{
            width: 60px;
            height: 30px;
            background: #4cd964;
            border-radius: 30%;
        }
    </style>
    <script>
        var myapp = angular.module("myapp",["ngRoute"]);
        myapp.controller("myCtrl",function ($scope) {
            $scope.flag=true;
            $scope.order=function () {
                $scope.myFromshow=false;
                $scope.s1=false;
                $scope.s2=false;
                $scope.s3=false;
                $scope.flag=true;
                if ($scope.search_style_value==1){
                    if ($scope.pwd1!=$scope.pwd2){
                        $scope.myObj = {
                            "border":"1px solid red"
                        }
                    } else {
                        $scope.myObj = {
                            "border":"1px solid black"
                        }
                    }
                }
                if ($scope.search_style_value==2){
                    $scope.myFromshow=true;
                    $scope.s1=true;
                    $scope.s2=true;
                    $scope.s3=true;
                }
                if ($scope.search_style_value==3){
                    $scope.flag=false;
                    $scope.sub=function () {
                        if ($scope.pwd1!=null && $scope.pwd2!=null){
                            if ($scope.pwd1>6 && $scope/pwd2>6){
                                if ($scope.pwd1==$scope.pwd2){
                                    $scope.myFromshow=false;
                                    $scope.flag=true;
                                    $scope.pwd1="";
                                    $scope.pwd2="";
                                    alert("提交成功");
                                } else {
                                    $scope.myFromshow=true;
                                    $scope.s3=true;
                                }
                            } else {
                                if ($scope.pwd1!=$scope.pwd2){
                                    $scope.myFromshow=true;
                                    $scope.s3=true;
                                }
                                $scope.myFromshow=true;
                                $scope.s1=true;
                            }
                        } else {
                            $scope.myFromshow=true;
                            $scope.s2=true;
                        }
                    };
                }
            };
        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div>
<span>密码</span>
&nbsp;&nbsp;<input type="password" placeholder="请输入6-20个字符" ng-model="pwd1" ng-style="myObj"><br/>
<span>重复密码</span>
&nbsp;&nbsp;<input type="password" placeholder="再次输入密码" ng-model="pwd2" ng-style="myObj"><br/>

<div ng-show="myFromshow" style="background: red; width: 300px">
    <ul style="color: black">
        <li ng-show="s1">密码长度不能小于6个字符</li>
        <li ng-show="s2">密码不能为空</li>
        <li ng-show="s3">两次密码输入不一致</li>
    </ul>
</div>
<input type="button" value="提交" ng-click="sub()" ng-disabled="flag" class="ann">
</div>

<div>
<p>显示方式</p>
<select ng-model="search_style_value" ng-change="order()">
    <option value="0">0</option>
    <option value="1">只有输入框样式变化</option>
    <option value="2">显示错误提示</option>
    <option value="3">点击提交才能显示错误提示</option>
</select>
</div>
</body>
</html>