下拉菜单选择输入框样式

本文展示了如何使用AngularJS框架,通过下拉菜单的选择来改变输入框的样式。当用户选择不同的选项时,输入框的类名会相应改变,从而影响其外观。例如,当用户选择'只有输入框样式变化'时,如果输入的密码长度不足或两次输入不一致,输入框将显示特定样式。此外,还有'显示详细信息'和'点击时显示效果'两种模式,提供不同的反馈信息和交互体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


 <script type="text/javascript" src="js/angular.min.js" ></script>
  <style>
   .ip {
    border: 1px solid red;
   }
  </style>
 </head>
 <body ng-app="MyApp" ng-controller="MyCont">
  <select ng-change="sel()" ng-model="xuan" ng-init="xuan='只有输入框样式变化'">
   <option>只有输入框样式变化</option>
   <option>显示详细信息</option>
   <option>点击时显示效果</option>
  </select><br /> 输入密码
  <input type="text" ng-model="pwd" class="{{pass}}" /><br /> 重复密码
  <input type="text" ng-model="pwd1" class="{{pass}}" /><br />
  <button ng-click="cli()">提交</button>
  <ul class="ul" ng-hide="hi">
   <li ng-repeat="li in xin">{{li}}</li>
  </ul>
  <script type="text/javascript">
   var mo = angular.module("MyApp", []);
   mo.controller("MyCont", function($scope) {
    $scope.sel = function() {
     var aa = $scope.xuan;
     $scope.xin = [];
     if(aa == "只有输入框样式变化") {
      var pwd = $scope.pwd;
      var pwd1 = $scope.pwd1;
      if(pwd == undefined || pwd1 == undefined) {
       $scope.pass = "ip";
      }
      if(pwd.length <= 6 || pwd1.length <= 6) {
       $scope.pass = "ip";
      }
      if(pwd != pwd1) {
       $scope.pass = "ip";
      }
     } else if(aa == "显示详细信息") {
      var pwd = $scope.pwd;
      var pwd1 = $scope.pwd1;
      $scope.pass = "vp";
      if(pwd == undefined || pwd1 == undefined) {
       $scope.xin.push("密码不能为空");
      }
      if(pwd.length <= 6 || pwd1.length <= 6) {
       $scope.xin.push("密码长度不能小于六位")
      }
      if(pwd != pwd1) {
       $scope.xin.push("输入两次密码不同")
      }
     } else if(aa == "点击时显示效果") {
      $scope.hi = true;
      $scope.pass = "vp";
     }
    }
    $scope.cli = function() {
     var pwd = $scope.pwd;
     var pwd1 = $scope.pwd1;
     $scope.xin = [];
     if(pwd == undefined || pwd1 == undefined) {
      $scope.xin.push("密码不能为空");
     }
     if(pwd.length <= 6 || pwd1.length <= 6) {
      $scope.xin.push("密码长度不能小于六位")
     }
     if(pwd != pwd1) {
      $scope.xin.push("输入两次密码不同")
     }
     $scope.hi = false;
    }
   })
  </script>
 </body>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值