zoukankan      html  css  js  c++  java
  • 混合开发(AngularJs表单密码验证)

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular-1.5.5/angular.js"></script>
    <style>
    .a1{
    500px;
    height: auto;
    margin-left: 500px;
    }
    .a2{
    500px;
    height: auto;
    background: palevioletred;
    color: red;
    padding: 20px;
    }
    .red{
    border: 1px solid red;
    }
    </style>
    <script>
    var myapp=angular.module("myapp",[]);
    myapp.controller("myCtrl",function ($scope) {
    //$scope.show1=false;
    $scope.xia="只显示输入框样式"
    $scope.show1=function () {
    //console.log($scope.xia)
    if($scope.xia=="只显示输入框样式"){
    return false;
    }else{
    return true;
    }
    }
    /* $scope.xia="只显示输入框样式"
    if($scope.xia=="只显示输入框样式"){
    $scope.show1=false;
    }else{
    $scope.show1=true;
    }*/
    $scope.pass1="";
    $scope.pass2="";
    $scope.show2=true;
    $scope.show3=true;
    $scope.show4=true;
    $scope.show5=false;
    $scope.check=false;

    $scope.add=function () {
    if($scope.pass1.length<=6||$scope.pass2.length<=6){
    $scope.show2=true;
    }else{
    $scope.show2=false;
    };
    if($scope.pass1==""||$scope.pass2==""){
    $scope.show3=true;
    }else{
    $scope.show3=false;
    }
    if($scope.pass1!=$scope.pass2){
    $scope.show4=true;
    }else{
    $scope.show4=false;
    }
    if($scope.show2==true||$scope.show3==true||$scope.show4==true){
    $scope.check=true;
    }else if($scope.show2==false&&$scope.show3==false&&$scope.show4==false){
    $scope.check=false;
    $scope.show1=function () {
    return false;
    }
    }
    }
    })
    </script>
    </head>
    <body ng-app="myapp" ng-controller="myCtrl">

    <div class="a1">
    密码:<input type="password" ng-model="pass1" ng-class="{red:check}"><br>
    重复密码:<input type="password" ng-model="pass2" ng-class="{red:check}"><br> <div ng-show="show1()" class="a2"> <ul> <li ng-show="show2">密码长度不能小于6个字符!</li> <li ng-show="show3">密码不能为空!</li> <li ng-show="show4">两次密码输入不一致!</li> </ul> </div> <button ng-click="add()">提交</button><br> </div> <span>显示方式</span><br> <select ng-model="xia"> <option>只显示输入框样式</option> <option>显示错误提示</option> </select></body></html>
  • 相关阅读:
    chapter 12_1 数据文件
    chapter11_3 字符串缓冲
    chapter11_2 Lua链表与队列
    chapter11_1 Lua数组、列表
    chapter9_4 非抢占式的多线程
    Java设计模式
    java内存回收机制
    javaIO流概述
    java集合概述
    java多线程
  • 原文地址:https://www.cnblogs.com/ysxy/p/7723175.html
Copyright © 2011-2022 走看看