Angular 表单判断密码

来源：互联网发布：淘宝上的东西是正品吗编辑：程序博客网时间：2024/06/05 07:30
下面的代码只是对表单中密码进行判断，去改变一些CSS属性！
<!DOCTYPE html><html ng-app="rikao"><head lang="en">    <meta charset="UTF-8">    <script type="text/javascript" src="jquery.1.12.4.js"></script>    <script type="text/javascript" src="ionic/js/angular/angular.js"></script>    <script type="text/javascript" src="angular-route.js"></script>    <script type="text/javascript" src="angular-route.js"></script>    <title></title>    <style>        * {            font-size: 12px;            margin: 0;            padding: 0;        }        .btn {            margin-left: 70px;            background-color: green;            color:white;            border: none;            width: 55px;            height: 25px;        }        .form #errTips {            width: 226px;            background-color: lightpink;            color: darkred;            border-radius: 4px;            margin-left: 70px;            margin-top: 6px;            margin-bottom: 4px;            padding: 16px 48px;        }    </style>    <script type="text/javascript">        var zt;        var app = angular.module("rikao",[]);        app.controller("myCtrls",function($scope) {            $scope.flag = false;            $scope.gai = function() {                var aa = $scope.chages;                zt = aa;                console.log(zt);            }           $scope.tijiao = function() {               if(zt!= 2) {                   $scope.flag = false;                   var m1 = $("#in1").val();                   var m2 = $("#in2").val();                   if(m1=""||m1!=m2||m1.length<6||m1.length>=20) {                           $("#in1").css({"border":"2px red solid"});                           $("#in2").css({"border":"2px red solid"});                       }else {                       location="https://www.baidu.com/";                   }               }else{                   var m1 = $("#in1").val();                   var m2 = $("#in2").val();                   if(m1!=m2) {                       $scope.flag = true;                       $("#in1").css({"border":"2px red solid"});                       $("#in2").css({"border":"2px red solid"});                       $scope.zt3 = true;                   }else {                       $scope.zt3 = false;                   }                   if(m1=="") {                       $scope.flag = true;                       $("#in1").css({"border":"2px red solid"});                       $("#in2").css({"border":"2px red solid"});                       $scope.zt2 = true;                   }else if(zt == 2) {                       $scope.zt2 = false;                   }                   if(m1.length<6 || m1.length>=20) {                       $scope.flag = true;                       $("#in1").css({"border":"2px red solid"});                       $("#in2").css({"border":"2px red solid"});                       $scope.zt1 = true;                   }else {                       $scope.zt1 = false                   }                   if(m1!=""&&m1==m2&&m1.length>=6&&m1.length<20) {                       location="https://www.baidu.com/";                   }               }           }        });    </script></head><body ng-controller="myCtrls"><div class="form" style="margin-top: 20px">  <div>  密码  <input id="in1" type="password" ng-model="one" placeholder="6-20个字符"/></div><br/>  <div>重复密码  <input id="in2" type="password" ng-model="two" placeholder="再次输入密码"/></div><br/>    <div id="errTips" ng-show="flag">        <ul>            <li ng-show="zt1">密码长度不能小于6个字符！</li>            <li ng-show="zt2">密码不能为空！</li>            <li ng-show="zt3">两次密码输入不一致！</li>        </ul>    </div><br/> <button class="btn" ng-click="tijiao()">提交</button><br/><hr/><div>    显示方式：<br/>    <select ng-model="chages" ng-change="gai()">        <option value="">只有输入框样式变化</option>        <option value="2">显示错误提示</option>    </select></div></div></body></html>
阅读全文
0 0