html angular+jquery:判断密码并改变标签样式+新增提示内容

来源：互联网发布：php手游平台源码编辑：程序博客网时间：2024/06/04 20:02

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           #ts {
               width: 148px;
           }
       </style>
       <script type="text/javascript" src="js/angular.js"></script>
       <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
       <script>
           flag = false;
           var app = angular.module("myApp", []);
           app.controller("myCtrl", function($scope) {
               //只有输入框样式变化
               $scope.sel1 = function() {
                   $scope.sub = function() {
                       if($scope.text1 == $scope.text2) {
                           alert("提交成功");
                           $(function() {
                               $("input").css("border-color", "black");
                           });
                       } else {
                           $(function() {
                               $("input").css("border-color", "red");
                           });
                       }
                   }
               }

               //显示错误提示
               $scope.sel2 = function() {
                   $scope.sub = function() {
                       if($scope.text1 == $scope.text2 && $scope.text1.length >= 6 && $scope.text2.length >= 6) {
                           alert("提交成功");
                           $(function() {
                               $("input").css("border-color", "black");
                               $("#ts").html("");
                           });
                       } else {
                           $(function() {
                               $("input").css("border-color", "red");
                               if($scope.text1.length < 6 && $scope.text2.length < 6 && $scope.text1 != $scope.text2) {
                                   $("#ts").css("background-color", "pink");
                                   $("#ts").html("<li>密码长度不能小于6个字符!</li><li>密码不能为空!</li><li>两次密码输入不一致!</li>");
                               } else if($scope.text1 != $scope.text2) {
                                   $("#ts").css("background-color", "pink");
                                   $("#ts").html("<li>两次密码输入不一致</li>");
                               } else if($scope.text1.length < 6 && $scope.text2.length < 6) {
                                   $("#ts").css("background-color", "pink");
                                   $("#ts").html("<li>密码长度不能小于6个字符!</li>");
                               }
                           });
                       }
                   }
               }

               //点击提交才显示错误提示
               $scope.sel3 = function() {
                   $scope.sub = function() {
                       if($scope.text1 == $scope.text2 && $scope.text1.length >= 6 && $scope.text2.length >= 6) {
                           alert("提交成功");
                           $(function() {
                               $("input").css("border-color", "black");
                               $("#ts").html("");
                           });
                       } else {
                           $(function() {
                               $("input").css("border-color", "red");
                               if($scope.text1.length < 6 && $scope.text2.length < 6 && $scope.text1 != $scope.text2) {
                                   $("#ts").css("background-color", "pink");
                                   $("#ts").html("<li>密码长度不能小于6个字符!</li><li>两次密码输入不一致!</li>");
                               } else if($scope.text1 != $scope.text2) {
                                   $("#ts").css("background-color", "pink");
                                   $("#ts").html("<li>两次密码输入不一致</li>");
                               } else if($scope.text1.length < 6 && $scope.text2.length < 6) {
                                   $("#ts").css("background-color", "pink");
                                   $("#ts").html("<li>密码长度不能小于6个字符!</li>");
                               }
                           });
                       }
                   }
               }
           });
       </script>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">
       <div style="margin-left: 10%;">
           <p style="margin-left: 2.5%;">密码:<input type="password" placeholder="6-20个字符" ng-model="text1" /></p>
           <p>重复密码:<input type="password" placeholder="6-20个字符" ng-model="text2" /></p>
           <p id="ts" style="margin-left: 5.5%;"></p>
           <button ng-click="sub()" style="margin-left: 5.5%;">提交</button>
       </div>
       显示方式:<br />
       <select>
           <option selected="selected">--请选择--</option>
           <option ng-click="sel1()">只有输入框样式变化</option>
           <option ng-click="sel2()">显示错误提示</option>
           <option ng-click="sel3()">点击提交才显示错误提示</option>
       </select>
   </body>

</html>

阅读全文

0 0