混合开发（AngularJs表单密码验证）

最新推荐文章于 2024-05-06 18:26:11 发布

山清水秀iOS

最新推荐文章于 2024-05-06 18:26:11 发布

阅读量73

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ysxy/p/7723175.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular-1.5.5/angular.js"></script>
<style>
 .a1{
width: 500px;
height: auto;
margin-left: 500px;
 }
 .a2{
width: 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>

转载于:https://www.cnblogs.com/ysxy/p/7723175.html

山清水秀iOS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
混合开发（AngularJs表单密码验证）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="angular-1.5.5/angular.js"></script> <style...
复制链接

扫一扫