console
var member = angular.module('member', ['ngRoute'])
.directive('validpassword',function(){
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl){
ctrl.$parsers.unshift(function(viewValue){
if(viewValue == $("[name=pwd]").val()){
ctrl.$setValidity("validPassword", true);
}else{
ctrl.$setValidity("validPassword", false);
}
});
}
}
});
function registerCtrl($scope, $routeParams){
/*$scope.$watch(function($scope){
console.log($scope.register.name.$viewValue);
return $scope.register.name.$viewValue;
},function(new_value,old_value){
if(new_value){
$scope["nameClass"] = "inp-tit-no-float";
}else{
$scope["nameClass"] = "inp-tit-float";
}
});*/
// function initScopeValue($scope, nameJson, value, changeValue)
//initScopeValue($scope, {pwd: 'pwdClass', pwds: 'pwdsClass'}, "inp-tit-float", "inp-tit-no-float");
}
function initScopeValue($scope, nameJson, value, changeValue){
var createFun = function(valueName){
return function(newValue, oldValue, $scope){
if(newValue){
$scope[valueName] = changeValue;
}else{
$scope[valueName] = value;
}
};
}
for(var item in nameJson){
$scope.$watch(item, createFun(nameJson[item]));
}
}
<html ng-app>
<script id="jquery_182" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
<script id="others_angular_103" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/other/angular.min.js"></script>
<body>
<div class="register c-div" ng-pattern="/.{2-10}/" ng-controller="registerCtrl">
<form name="register" class="login-form c-form" autocomplete="off">
<table>
<tr>
<td>
<div class="inp-div">
<label>
<input required ng-pattern="/.{2,10}/" type="text" ng-model="name" name="name"/>
<span class="inp-tit" ng-class="{'inp-tit-float': !register.name.$viewValue, 'inp-tit-no-float': register.name.$viewValue}">昵称</span>
<span class="valid-tit" ng-class="{'valid-ok': register.name.$valid, 'valid-no-ok': !register.name.$valid}">请输入2-10个字符</span>
</label>
<div>
</td>
</tr>
<tr>
<td>
<div class="inp-div">
<label>
<input required ng-pattern="/.{6,}/" type="password" name="pwd" ng-model="pwd"/>
<span class="inp-tit" ng-class="{'inp-tit-float': !register.pwd.$viewValue, 'inp-tit-no-float': register.pwd.$viewValue}">密码</span>
<span class="valid-tit" ng-class="{'valid-ok': register.pwd.$valid, 'valid-no-ok': !register.pwd.$valid}">请输入至少6位密码</span>
</label>
</label>
<div>
</td>
</tr>
<tr>
<td>
<div class="inp-div">
<label>
<input required type="password" name="pwds" ng-model="pwds"/>
<span class="inp-tit" ng-class="{'inp-tit-float': !register.pwds.$viewValue, 'inp-tit-no-float': register.pwds.$viewValue}">密码</span>
<span class="valid-tit" ng-class="{'valid-ok':register.pwds.$valid,'valid-no-ok':!register.pwds.$valid}">请再输入一次密码</span>
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="inp-div">
<input type="submit" ng-class="{'submit-ok':!register.$invalid, 'submit-no-ok': register.$invalid}" value="确认注册" />
</div>
</td>
</tr>
</table>
</form>
</div>
</body>
</div>
.index-bottom{
text-align: center;
background-color: rgba(22,44,88, 0.8);
}
.c-div{
width: 355px;
margin: 0 auto;
}
.c-form{
padding: 50px;
border-radius: 2px;
background-color: rgba(255, 255, 255 , 0.8);
border: 1px solid #ccc;
}
.c-form input[type="text"],.c-form input[type="password"]{
width:250px;
height: 60px;
font-size: 15px;
padding: 0px 6px;
border: 1px solid rgba(91, 199, 211, 0.8);
border-radius: 1px;
background-color: rgba(255, 255, 255, 0.8);
}
.c-form input[type="submit"]{
width:265px;
height: 30px;
font-weight: bold;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.submit-ok{
background-color: rgb(91, 199, 211);
border: rgb(91, 199, 211);
}
.submit-no-ok{
background-color: #ccc;
border: #ccc;
}
.inp-div{
position: relative;
margin: 5px 0px;
overflow: hidden;
}
.inp-div .valid-tit{
position: absolute;
bottom: 5px;
font-size:12px;
transition: all 0.5s;
padding:0px 5px;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.inp-div .valid-ok{
color: rgba(0, 0, 0, 0);
right: -20px;
}
.inp-div .valid-no-ok{
right: 5px;
color: rgba(0, 0, 0, 0.5);
}
input.ng-invalid {border: 1px solid red;}
input.ng-valid {border: 1px solid green;}
.inp-tit{
height: 40px;
position: absolute;
top:0;
left:8px;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.inp-tit-float{
line-height: 60px;
font-size: 15px;
color: #c6c6c6;
}
.inp-tit-no-float{
left:5px;
line-height: 20px;
font-size: 12px;
color: rgba(89, 174, 189, 1);
font-weight: bold;
}