我有一个关于我正在制作的应用程序的问题（我之前已经问过）。我注意到单击提交或重置按钮后输入字段之间的间距发生了变化。这与类的呈现方式有关吗？有没有办法阻止这种变化？
此外，我仍在处理清理代码的过程，所以我知道它需要一些修剪。：）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Validation</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.container {
width: 500px;
clear:both;
}
.container input{
width:100%;
clear:both;
}
.buttons{
text-align:center;
}
#output{
text-align:center;
visibility: hidden;
}
</style>
</head>
<body>
<form id="myForm" onsubmit="return valfunc()";>
<div class="container">
<div id="usrnm">
<label class="control-label">Username: </label>
<input class="form-control" class="form-group" type="text" name="username" id="username">
</div>
<div id="pswrd">
<label class="control-label">Password: </label>
<input class="form-control" class="form-group" type="password" name="password" id="password">
</div>
<div id="cnfrm">
<label class="control-label">Confirm: </label>
<input class="form-control" class="form-group" type="password" name="confirm" id="confirm">
</div>
<div id="ag">
<label class="control-label">Age: </label>
<input class="form-control" class="form-group" type="text" name="age" id="age"> <br>
</div>
</div>
<div class="buttons">
<input type="submit" id="submit" class="btn btn-primary" onclick="valfunc();">
<input type="reset" id="resetbutton" class="btn btn-default" onclick="resetfunc()">
</div>
</form>
<br>
<div id="output">
<ul> </ul>
</div>
<script>
function valfunc() {
document.getElementById("output").style.visibility = "visible";
var username =
document.getElementById("username").value;
var password =
document.getElementById("password").value;
var confirm =
document.getElementById("confirm").value;
var age =
document.getElementById("age").value;
var myerror = "";
var nouser = 0;
var error = [];
if (username.length==0)
{
nouser = 1;
myerror += "<li> Username field has been left blank.";
error[0] = 1;
}
if (password.length==0)
{
myerror += "<li> Password field has been left blank.";
error[1] = 1;
}
if (confirm.length==0)
{
myerror += "<li> Confirm field has been left blank.";
error[2] = 1;
}
if (age.length==0)
{
myerror += "<li> Age field has been left blank.";
error[3] = 1;
}
if ((username.length <5) || (username.length > 15))
{
myerror +=
"<li> Username should be between 5 and 15 characters long.";
error[0] = 1;
}
if (password !== confirm) {
myerror +=
"<li> Password and Confirm input text box values should match.";
error[1] = 1;
error[2] = 1 ;
}
var letters = /^[A-Za-z]+$/;
if(username.match(letters)){
}
else if(nouser==1){
}
else {
myerror +=
"<li> Username can only have letters.";
error[0] = 1;
}
var yesnum = 0;
if(age.match(/^\d+$/)) {
var yesnum = 1;
}
if ((age <= 0)||(yesnum==0)) {
myerror +=
"<li> Age should be a positive integer.";
error[3] = 1;
} else {
if ((age<18)||(age>110)){
myerror +=
"<li> Age should be between the values 18 and 110.";
error[3] = 1;
}
}
if (error[0]==1){
document.getElementById("usrnm").className = "form-group has-error";
}
else {
document.getElementById("usrnm").className = "form-group has-success";
}
if (error[1]==1){
document.getElementById("pswrd").className = "form-group has-error";
}
else {
document.getElementById("pswrd").className = "form-group has-success";
}
if (error[2]==1){
document.getElementById("cnfrm").className = "form-group has-error";
}
else {
document.getElementById("cnfrm").className = "form-group has-success";
}
if (error[3]==1){
document.getElementById("ag").className = "form-group has-error";
}
else {
document.getElementById("ag").className = "form-group has-success";
}
document.getElementById("output").innerHTML = myerror;
if (myerror.length > 1) {
return false;
document.getElementById("output").className = "alert alert-danger";
}
else {
document.getElementById("output").innerHTML = "Form values successfully validated.";
document.getElementById("output").className = "alert alert-success";
return false;
}
}
function resetfunc(){
var form = document.getElementById("myForm");
form.reset();
document.getElementById("output").innerHTML = "";
document.getElementById("output").style.visibility = "hidden";
const output1 = document.getElementById("output");
const username1 = document.getElementById("usrnm");
const password1 = document.getElementById("pswrd");
const confirm1 = document.getElementById("cnfrm");
const age1 = document.getElementById("ag");
username1.className = "form-group";
password1.className = "form-group";
confirm1.className = "form-group";
age1.className = "form-group";
output1.className = "alert"
}
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
答案 0 :(得分：0)
问题是您正在动态创建<li>元素并将其插入到页面中，从而导致创建不正确的HTML结构。 <li>元素必须存在于<ul>或<ol>元素中，并且这些元素会导致缩进。这是你看到的缩进。
你的代码太多了，真的需要重写，但是我已经从你的错误字符串中删除了<li>，你可以看到按钮的缩进停止了。
要纠正此问题。确保<li>元素已正确放入列表中，并且列表与按钮分开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Validation</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.container {
width: 500px;
clear:both;
}
.container input{
width:100%;
clear:both;
}
.buttons{
text-align:center;
}
#output{
text-align:center;
visibility: hidden;
}
</style>
</head>
<body>
<form id="myForm" onsubmit="return valfunc()";>
<div class="container">
<div id="usrnm">
<label class="control-label">Username: </label>
<input class="form-control" class="form-group" type="text" name="username" id="username">
</div>
<div id="pswrd">
<label class="control-label">Password: </label>
<input class="form-control" class="form-group" type="password" name="password" id="password">
</div>
<div id="cnfrm">
<label class="control-label">Confirm: </label>
<input class="form-control" class="form-group" type="password" name="confirm" id="confirm">
</div>
<div id="ag">
<label class="control-label">Age: </label>
<input class="form-control" class="form-group" type="text" name="age" id="age"> <br>
</div>
</div>
<div class="buttons">
<input type="submit" id="submit" class="btn btn-primary" onclick="valfunc();">
<input type="reset" id="resetbutton" class="btn btn-default" onclick="resetfunc()">
</div>
</form>
<br>
<div id="output">
<ul> </ul>
</div>
<script>
function valfunc() {
document.getElementById("output").style.visibility = "visible";
var username =
document.getElementById("username").value;
var password =
document.getElementById("password").value;
var confirm =
document.getElementById("confirm").value;
var age =
document.getElementById("age").value;
var myerror = "";
var nouser = 0;
var error = [];
if (username.length==0)
{
nouser = 1;
myerror += "Username field has been left blank.";
error[0] = 1;
}
if (password.length==0)
{
myerror += "Password field has been left blank.";
error[1] = 1;
}
if (confirm.length==0)
{
myerror += "Confirm field has been left blank.";
error[2] = 1;
}
if (age.length==0)
{
myerror += "Age field has been left blank.";
error[3] = 1;
}
if ((username.length <5) || (username.length > 15))
{
myerror +=
"Username should be between 5 and 15 characters long.";
error[0] = 1;
}
if (password !== confirm) {
myerror +=
"Password and Confirm input text box values should match.";
error[1] = 1;
error[2] = 1 ;
}
var letters = /^[A-Za-z]+$/;
if(username.match(letters)){
}
else if(nouser==1){
}
else {
myerror +=
"<li> Username can only have letters.";
error[0] = 1;
}
var yesnum = 0;
if(age.match(/^\d+$/)) {
var yesnum = 1;
}
if ((age <= 0)||(yesnum==0)) {
myerror +=
"<li> Age should be a positive integer.";
error[3] = 1;
} else {
if ((age<18)||(age>110)){
myerror +=
"<li> Age should be between the values 18 and 110.";
error[3] = 1;
}
}
if (error[0]==1){
document.getElementById("usrnm").className = "form-group has-error";
}
else {
document.getElementById("usrnm").className = "form-group has-success";
}
if (error[1]==1){
document.getElementById("pswrd").className = "form-group has-error";
}
else {
document.getElementById("pswrd").className = "form-group has-success";
}
if (error[2]==1){
document.getElementById("cnfrm").className = "form-group has-error";
}
else {
document.getElementById("cnfrm").className = "form-group has-success";
}
if (error[3]==1){
document.getElementById("ag").className = "form-group has-error";
}
else {
document.getElementById("ag").className = "form-group has-success";
}
document.getElementById("output").innerHTML = myerror;
if (myerror.length > 1) {
return false;
document.getElementById("output").className = "alert alert-danger";
}
else {
document.getElementById("output").innerHTML = "Form values successfully validated.";
document.getElementById("output").className = "alert alert-success";
return false;
}
}
function resetfunc(){
var form = document.getElementById("myForm");
form.reset();
document.getElementById("output").innerHTML = "";
document.getElementById("output").style.visibility = "hidden";
const output1 = document.getElementById("output");
const username1 = document.getElementById("usrnm");
const password1 = document.getElementById("pswrd");
const confirm1 = document.getElementById("cnfrm");
const age1 = document.getElementById("ag");
username1.className = "form-group";
password1.className = "form-group";
confirm1.className = "form-group";
age1.className = "form-group";
output1.className = "alert"
}
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
答案 1 :(得分：0)
.form-group {
margin: 1rem;
}
在提交表单后，您将.form-group类添加到DIV（对于ex id =＆＃34; usrnm＆＃34;）。而.form-group类有一个底部边缘。
更新您的
<div id="usrnm">
到
<div id="usrnm" **class="form-group"**>
这将解决跳转问题