我有这个页面:
而且,当我尝试注册没有字段时,它会以这种方式正确显示错误:
然而,在我测试的时候,我在每个字段中插入了一个随机字符,并按下了寄存器,这是我收到的屏幕(请注意错误是正确的,但这会弄乱我的HTML):
这是AngularJS控制器代码:
app.controller('registerController', ['$scope', '$location', '$http', 'cssInjector', function ($scope, $location, $http, cssInjector) {
cssInjector.add('css/index.css');
$scope.user = {};
$scope.errors = [];
$scope.home = function () {
$location.path('/');
};
$scope.submit = function () {
$http.post('/users', $scope.user).then( function (data) {
console.log('success');
console.log(data);
}, function (errors) {
console.log('error');
console.log(errors);
$scope.errors = [];
var errorsObject = errors.data.errors;
for(var index in errorsObject) {
console.log(index);
$scope.errors[errorsObject[index].path] = errorsObject[index].message;
}
console.log($scope.errors);
});
};
}]);
以下是Node.js处理的请求:
app.post('/users', function (request, response) {
var body = _.pick(request.body, 'full_name', 'email', 'password', 'repeat_password');
body.rank = 0;
body.full_name = body.full_name || '';
body.email = body.email || '';
body.password = body.password || '';
body.repeat_password = body.repeat_password || '';
var errors = {
errors: [
]
};
if (body.full_name.length === 0) {
errors.errors.push({
message: 'The full name field cannot be empty.',
path: 'full_name'
});
}
if (body.email.length === 0) {
errors.errors.push({
message: 'The email field cannot be empty.',
path: 'email'
});
}
if (body.password.length === 0) {
errors.errors.push({
message: 'The password field cannot be empty.',
path: 'password'
});
}
if (body.repeat_password.length === 0) {
errors.errors.push({
message: 'The repeat password field cannot be empty.',
path: 'repeat_password'
});
}
if (errors.errors.length > 0) {
response.status(400).json(errors).send();
} else {
if (body.password === body.repeat_password) {
delete body.repeat_password;
database.users.create(body).then( function(data) {
response.send('Successfully created!');
}).catch( function (errors) {
response.status(400).json(errors).send();
});
} else {
var error = {
errors: [
{
message: "Repeated password does not match the previous.",
path: "repeat_password"
}
]
};
response.status(400).json(error).send();
}
}
});
此特定表单的HTML代码:
<h1 class="main-title animated zoomInUp">HassanAlthaf.com</h1>
<form novalidate class="index-form animated slideInLeft" data-ng-submit="submit()">
<input type="text" data-ng-model="user.full_name" placeholder="Your full name">
<p class="error">{{errors['full_name']}}</p>
<input type="text" data-ng-model="user.email" placeholder="Your email address">
<p class="error">{{errors['email']}}</p>
<input type="password" data-ng-model="user.password" placeholder="Choose a password">
<p class="error">{{errors['password']}}</p>
<input type="password" data-ng-model="user.repeat_password" placeholder="Repeat your password">
<p class="error">{{errors['repeat_password']}}</p>
<div class="row">
<button type="submit" class="button-green">Register</button>
<button type="button" class="button-red pull-right" data-ng-click="home()">Home</button>
</div>
</form>
最后,相关的CSS代码:
@import url(https://fonts.googleapis.com/css?family=Lato:100italic,100,400,700);
* {
box-sizing: border-box;
}
body {
background: #34495E;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.main-title {
font-size: 45px;
padding: 0;
margin: 0 0 30px 0;
text-align: center;
color: #FFFFFF;
font-family: 'Lato', sans-serif;
font-weight: 100;
}
.index-form {
margin: 0 auto;
}
.index-form input, .index-form button {
display: block;
}
.index-form input {
padding: 8px;
border-radius: 5px;
outline: none;
border: 2px solid #2E4153;
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 14px;
text-align: center;
width: 30%;
margin: 0 auto 10px auto !important;
}
.index-form input:focus {
border: 2px solid #22303D;
}
.red-border {
border: 2px solid #C0392B;
}
.index-form .row {
width: 30%;
margin: 0 auto;
}
.index-form button {
width: 45%;
display: inline-block;
padding: 0;
padding: 8px;
border-radius: 40px;
outline: none;
font-family: 'Lato', sans-serif;
font-size: 14px;
font-weight: 400;
background: #FFFFFF;
transition: 0.3s background, 0.3s color;
}
.button-green {
border: 2px solid #27AE60;
color: #27AE60;
}
.button-green:hover {
background: #27AE60;
color: #FFFFFF;
}
.button-green:active {
background: #219251;
color: #FFFFFF;
border: 2px solid #219251;
}
.button-red {
border: 2px solid #C0392B;
color: #C0392B;
}
.button-red:hover {
background: #C0392B;
color: #FFFFFF;
}
.button-red:active {
background: #A43125;
color: #FFFFFF;
border: 2px solid #A43125;
}
.error {
color: #C0392B;
text-align: center;
}
/* Big tablet to 1200px */
@media only screen and (max-width: 1200px) {
.index-form input, .index-form .row {
width: 30%;
}
}
/* Small tablet to big tablet: from 768px to 1023px */
@media only screen and (max-width: 1023px) {
.index-form input, .index-form .row {
width: 40%;
}
}
/* Small phones to small tablets: from 481px to 767px */
@media only screen and (max-width: 767px) {
.index-form input, .index-form .row {
width: 90%;
}
}
/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {
.index-form input, .index-form .row {
width: 90%;
}
这种行为很奇怪,我非常感谢任何形式的帮助。解释得很好的答案会得到我的赏金。
答案 0 :(得分:0)
正如@epascarello建议的那样,我只是将每个元素包裹在内:<div class="row">....</div>
这对我很有用。