angularJS密码输入

来源：互联网发布：炉石传说盒子mac版编辑：程序博客网时间：2024/06/06 13:06
<!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>
阅读全文
0 0