index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="lib/font-awesome/css/font-awesome.css">
<script type="text/javascript" src="lib/angular.min .js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title>Angular</title>
<style type="text/css">
/*p.error {
display: none;
}*/
input.error {
border: 1px solid #a10;
}
.error {
color: #a10;
}
.wrapper {
width: 300px;
margin: 30px auto;
}
.has-success input {
border: 1px solid green;
}
pre {
display: none;
}
.input-result {
position: relative;
top: -27px;
float: right;
margin-right: 10px;
}
p.success {
color: green;
}
</style>
</head>
<body ng-app="myApp" ng-controller="SignUpController">
<div class="wrapper">
<form name="SignUpForm" ng-submit="submitForm()">
<h1>注册</h1>
<div class="form-group" ng-class="{'has-success':SignUpForm.username.$valid}">
<pre>合法：{{SignUpForm.username.$valid}}</pre>
<pre style="height: 50px;">合法：{{SignUpForm.username}}</pre>
<label>用户名：</label>
<input type="text"
class="form-control"
name="username"
ng-model="userdata.username"
ng-minlength="4"
ng-maxlength="32"
required>
<p aria-hidden="true" class="fa fa-check-square input-result success" ng-if="SignUpForm.username.$valid"></p>
<p class="error"
ng-if="SignUpForm.username.$error.required && SignUpForm.username.$touched">
用户名不可为空</p>
<p class="error"
ng-if="(SignUpForm.username.$error.minlength || SignUpForm.username.$error.maxlength) && SignUpForm.username.$touched">
用户名应是4-32位</p>
</div>
<div class="form-group" ng-class="{'has-success':SignUpForm.password.$valid}">
<pre>合法：{{SignUpForm.password.$valid}}</pre>
<pre style="height: 50px;">合法：{{SignUpForm.password}}</pre>
<label>密码：</label>
<input type="password"
class="form-control"
name="password"
ng-model="userdata.password"
required
ng-minlength="6"
ng-max-length="64">
<p aria-hidden="true" class="fa fa-check-square input-result success" ng-if="SignUpForm.password.$valid"></p>
<p class="error" ng-if="SignUpForm.password.$error.required && SignUpForm.password.$touched">密码不能为空</p>
<p class="error" ng-if="(SignUpForm.password.$error.minlength || SignUpForm.password.$error.maxlength) && SignUpForm.password.$touched">密码应是6-64位</p>
</div>
<div class="form-group" ng-class="{'has-success':SignUpForm.repassword.$valid}">
<pre>合法：{{SignUpForm.repassword.$valid}}</pre>
<pre style="height: 50px;">合法：{{SignUpForm.repassword}}</pre>
<label>确认密码：</label>
<input type="password"
class="form-control"
name="repassword"
ng-model="userdata.repassword"
required
compare="userdata.password">
<p aria-hidden="true" class="fa fa-check-square input-result success" ng-if="SignUpForm.repassword.$valid"></p>
<p class="error" ng-if="SignUpForm.repassword.$error.compare && SignUpForm.repassword.$touched">两次输入的密码不一致</p>
</div>
<div class="form-group">
<button class="btn btn-primary">注册</button>
</div>
</form>
</div>
</body>
</html>main.js
angular.module('myApp',[])
.controller('SignUpController',function($scope){
$scope.userdata= {};
$scope.submitForm = function(){
console.log($scope.userdata);
if($scope.SignUpForm.$invalid)//这里曾经出现错误：SignUpForm是form表单的名字
console.log('错误');
else
console.log('成功');
}
})
.directive('compare',function(){
var o = {};
o.strict='AE';
o.scope = {
orgText:'=compare'
}
o.require='ngModel';
o.link=function(sco,ele,att,con){
con.$validators.compare=function(v){
return v == sco.orgText;
}
sco.$watch('orgText',function(){
con.$validate();
})
}
return o;
})
645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
