AngularJS验证两次密码是否相同

最新推荐文章于 2021-12-03 11:24:46 发布

SXS120730

最新推荐文章于 2021-12-03 11:24:46 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/SXS120730/article/details/78328476

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red{
            border: 1px solid red;
        }
    </style>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function($scope){
            $scope.check=false;
            $scope.pas1="";
            $scope.pas2="";
            $scope.show=false;
            $scope.opt="只有输入框样式变化";

            $scope.fun=function(){
                console.log($scope.opt);
                if($scope.opt=="只有输入框样式变化"){
                    $scope.$watch("pas2",function(value){
                        if(value!=""){
                            if(value==$scope.pas1){
                                $scope.check=false;
                            }else{
                                $scope.check=true;
                            }
                        }
                    });
                }else if($scope.opt=="显示错误提示"){
                    $scope.$watch("pas2",function(value){
                        if(value!=""){
                            if(value==$scope.pas1){
                                $scope.check=false;
                                $scope.show=false;
                            }else{
                                $scope.check=true;
                                $scope.show=true;
                            }
                        }
                    });
                }else if($scope.opt=="点击提交"){
                    $scope.tj 

=function(){
                        if($scope.pas2!=""){
                            if($scope.pas2==$scope.pas1){
                                $scope.check=false;
                                $scope.show=false;
                            }else{
                                $scope.check=true;
                                $scope.show=true;
                            }
                        }
                    }
                }
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="password" ng-model="pas1" ng-class="{red:check}"><br>
<input type="password" ng-model="pas2" ng-class="{red:check}"><br/>
<ul ng-show="show">
    <li>密码长度不小于6<>
    <li>密码不能为空<>
    <li>两次密码输入不一致<>
</ul>
<button ng-click="tj()">按钮<tton><br/>
<select ng-model="opt" ng-change="fun()">
    <option>只有输入框样式变化</option>
    <option>显示错误提示</option>
    <option>提交</option>
<lect>
</body>
<ml>

或者


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
          $scope.mima="";
          $scope.password="";
          $scope.bhz="只有输入框样式的变化";
            $scope.show=false;
            $scope.bian=false;


          $scope.fun=function () {

           //   alert($scope.bhz)
              if($scope.mima!=""&&$scope.password!=""){
                  if($scope.bhz=="只有输入框样式的变化"){
                      if($scope.mima.length>=6&&$scope.mima.length<=20){
                          if($scope.mima==$scope.password){
                              $scope.bian=false;
                              $scope.show=false;
                          }
                      }else  if($scope.mima.length<=6||$scope.mima.length>=20||$scope.mima!=$scope.password){

                          $scope.bian=true;
                          $scope.show=false;
                      }
              }


              else

              if($scope.bhz=="显示错误提示"){

                      if($scope.mima.length>=6&&$scope.mima.length<=20){
                          if($scope.mima==$scope.password){
                              $scope.bian=false;
                              $scope.show=false;
                          }
                      }else  if($scope.mima.length<=6||$scope.mima.length>=20){
                          if($scope.mima!=$scope.password){
                              $scope.bian=true;
                              $scope.show=true;
                              $scope.tj1="密码长度不能小于6";
                              $scope.tj2="密码不能为空";
                              $scope.tj3="两次密码不相等";

                          }

                    }
                  }
                  else
                      if($scope.bhz=="点击提交才显示错误提示"){
                         $scope.sub=function () {

                                 if($scope.mima.length>=6&&$scope.mima.length<=20){
                                     if($scope.mima==$scope.password){
                                         $scope.bian=false;
                                         $scope.show=false;
                                     }
                                 }else  if($scope.mima.length<=6||$scope.mima.length>=20){
                                     if($scope.mima!=$scope.password){
                                         $scope.bian=true;
                                         $scope.show=true;
                                         $scope.tj1="密码长度不能小于6";
                                         $scope.tj2="密码长度不能大于20";
                                         $scope.tj3="两次密码必须相同";

                                     }

                             }
                         }
                      }
              }
          }



        });
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 1000px;
            height: 100px;
        }
        .div{
            width: 500px;
            height:200px;
            margin: 0 auto;
        }
        p{
            margin-top: 20px;
        }
        button{
            width: 60px;
            height:30px;
            background: green;
            margin-top: 20px;
        }
        input{
            height: 30px;
            width:200px;
        }
        #div{
            width: 80%;
            height: 40%;
            margin: 0 auto;
            background: lightcoral;
            margin-top: 10px;
        }
        .red{
            border:1px solid red;
        }
    </style>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
    <div class="div">
        <p>密码：<input type="text" placeholder="6—20个字符" ng-model="mima" ng-class="{red:bian}"/></p>
        <p>重复密码：<input type="text" placeholder="再次输入密码" ng-model="password"ng-class="{red:bian}"/></p>

                <ul  id="div" ng-show="show">
                    <li>{{tj1}}</li>
                    <li>{{tj2}}</li>
                    <li>{{tj3}}</li>
                </ul>

           <button ng-click="sub()">提交</button>
    </div>
    <p>显示方式</p>
    <select ng-model="bhz" ng-change="fun()">
        <option>只有输入框样式的变化</option>
        <option>显示错误提示</option>
        <option>点击提交才显示错误提示</option>
    </select>
</body>
</html>