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

来源：互联网发布：网页卡片式数据列表编辑：程序博客网时间：2024/06/05 13:32
一.实现效果
1.页面初始效果
2.两次密码不一致时的效果
3.当显示方式修改为显示错误提示时，详细的内容错误提示
4.当显示方式为提交时才显示的效果
二.代码展示
<html ng-app="myApp" ><head>    <meta content="charset" charset="UTF-8">    <style type="text/css">        .btn{            background-color: #26d353;            color: snow;            border: 1px;            margin-left: 112px;            width: 50px;            height: 30px;            margin-top: 20px;        }    </style>    <script type="text/javascript" src="jquery.1.12.4.js"></script>    <script type="text/javascript" src="angular-1.3.0.js"></script>    <script type="text/javascript" src="angular-route.js"></script>    <script>        var app = angular.module("myApp",["ngRoute"]);        app.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-controller="myCtrl"><div style="width: 500px;margin: 20px auto">    <span style="margin-right: 50px;margin-left: 30px;">密码</span><input type="password" placeholder="6-20个字符" ng-model="pwd1" ng-style="myObj" style="width: 300px"><br>    <span style="margin-right: 48px;">重复密码</span><input type="password" placeholder="再次输入密码" ng-model="pwd2" ng-style="myObj" style="width: 300px"><br>    <div  ng-show="myFromshow" style="margin-left: 86px;background-color: #ff979b" >        <ul style="color: #f06b68">            <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="btn"></div><hr/>        <div style="margin-left: 130px">            <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>
阅读全文
0 0