Angular 表单判断密码

最新推荐文章于 2021-11-28 12:21:31 发布

Gorky_19

最新推荐文章于 2021-11-28 12:21:31 发布

阅读量621

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Gorky_19/article/details/78332858

本文介绍了一个使用Angular和jQuery实现的表单验证示例，该示例通过修改CSS样式来反馈用户输入的有效性，并提供了两种不同的错误提示展示方式。

下面的代码只是对表单中密码进行判断，去改变一些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>