Javascript 奇怪的HTML行为
我有这一页: 而且,当我尝试不使用字段注册时,它会以这种方式正确显示错误: 然而,当我进行测试时,我在每个字段中插入了一个随机字符,然后按下register,这就是我收到的屏幕(请注意,错误是正确的,但这会弄乱我的HTML): 以下是AngularJS控制器代码:Javascript 奇怪的HTML行为,javascript,html,css,angularjs,node.js,Javascript,Html,Css,Angularjs,Node.js,我有这一页: 而且,当我尝试不使用字段注册时,它会以这种方式正确显示错误: 然而,当我进行测试时,我在每个字段中插入了一个随机字符,然后按下register,这就是我收到的屏幕(请注意,错误是正确的,但这会弄乱我的HTML): 以下是AngularJS控制器代码: app.controller('registerController', ['$scope', '$location', '$http', 'cssInjector', function ($scope, $location,
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>
这种行为很奇怪,我非常感谢任何帮助。解释得很好的答案将得到我的赏金。正如@epascarello所建议的,我只是简单地将每个元素包装在里面:
…
这对我来说非常有效。浏览器控制台中有错误吗?是的,有错误,因为我正在开发RESTful API。当使用JSON字符串传递无效数据时,它返回一个错误400。啊,神秘字段UI设计。@epascarello什么?:PBtw,这是一个使用AngularJS的
单页应用程序
。因此,在提交期间,页面不会重新加载。
@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%;
}