我正在尝试重置要删除的ag，usrnm，pswd，cnfrm元素（当我单击触发重置功能的重置按钮时）“form-group has-success”或“form-group has-error”之前添加的类。我已经尝试了以前看过的几件事，但没有一件能奏效。
我还有一个第二个问题，在主屏幕底部有一个div，我试图清除错误，并且无法将innerHTML重置为“”。
到目前为止，只有重新设置表单上的输入才有效。
<script>
...
function resetfunc(){
document.getElementById("myForm").reset();
document.getElementById("output").innerHTML = "";
document.getElementById("ag").className.clear;
document.getElementById("usrnm").removeClass('has-error');
document.getElementById("pswrd").className.clear;
document.getElementById("cnfrm").className.clear;
return false;
}
-----在这里编辑。从这里转发更多代码-----
<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()" onreset="return resetfunc()" ;>
<div class="container">
<div id="usrnm">
<label class="control-label">Username: </label>
<input class="form-control" type="text" name="username" id="username">
</div>
<div id="pswrd">
<label class="control-label">Password: </label>
<input class="form-control" type="password" name="password" id="password">
</div>
<div id="cnfrm">
<label class="control-label">Confirm: </label>
<input class="form-control" type="password" name="confirm" id="confirm">
</div>
<div id="ag">
<label class="control-label">Age: </label>
<input class="form-control" align:"right" type="text" name="age" id="age"> <br>
</div>
</div>
<div class="buttons">
<input type="submit" id="submit" class="btn btn-primary" onsubmit="valfunc();">
<input type="reset" id="reset" class="btn btn-default" onreset="resetfunc()">
</div>
</form>
<br>
<div class="alert alert-danger" 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;
}
if (age <= 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;
}
else {
document.getElementById("output").innerHTML = "Form values successfully validated.";
document.getElementById("output").className = "alert alert-success";
return true;
}
}
function resetfunc(){
document.getElementById("myForm").reset();
document.getElementById("output").innerHTML = "";
document.getElementById("ag").className.clear;
document.getElementById("usrnm").removeClass('has-error');
document.getElementById("pswrd").className=""
document.getElementById("cnfrm").className.clear;
return false;
}
</script>
答案 0 :(得分：0)
要删除类名，您应该使用node.classList.remove('className')：
function resetfunc(){
document.getElementById("myForm").reset();
document.getElementById("output").innerHTML = "";
document.getElementById("ag").classList.remove('classNameExample');
document.getElementById("usrnm").classList.remove('has-error');
document.getElementById("pswrd").classList.remove('classNameExample');
document.getElementById("cnfrm").classList.remove('classNameExample');
return false;
}
我重建你的代码：
document.addEventListener('DOMContentLoaded', function() {
let output = document.getElementById("output");
let username = document.getElementById("username");
let password = document.getElementById("password");
let confirm = document.getElementById("confirm");
let age = document.getElementById("age");
let reset = document.getElementById('reset');
let submit = document.getElementById('submit');
let list = document.getElementById('list');
let usernameContainer = document.getElementById("usrnm");
let passwordContainer = document.getElementById("pswrd");
let confirmContainer = document.getElementById("cnfrm");
let ageContainer = document.getElementById('ag');
reset.addEventListener('click', (ev) => {
resetfunc();
})
submit.addEventListener('click', (ev) => {
valfunc(ev);
})
function valfunc(ev) {
output.style.visibility = "visible";
var usernameValue = username.value;
var passwordValue = password.value;
var confirmValue = confirm.value;
var ageValue = age,
value;
var myerror = "";
var nouser = 0;
var error = [];
let clearListItem = document.createElement('li');
let docFrError = new DocumentFragment();
// let docFrError = new DocumentFragment();
if (usernameValue.length == 0) {
nouser = 1;
let cloneLi = clearListItem.cloneNode();
cloneLi.textContent = 'Username field has been left blank.'
docFrError.append(cloneLi);
error[0] = 1;
} else if ((usernameValue.length < 5) || (usernameValue.length > 15)) {
let cloneLi = clearListItem.cloneNode();
cloneLi.textContent = 'Username should be between 5 and 15 characters long'
docFrError.append(cloneLi);
error[0] = 1;
}
if (passwordValue.length == 0) {
let cloneLi = clearListItem.cloneNode();
cloneLi.textContent = 'Password field has been left blank.'
docFrError.append(cloneLi);
error[1] = 1;
}else if (passwordValue !== confirmValue) {
let cloneLi = clearListItem.cloneNode();
cloneLi.textContent = 'Password and Confirm input text box values should match'
docFrError.append(cloneLi);
error[1] = 1;
error[2] = 1;
}
var letters = /^[A-Za-z]+$/;
if (usernameValue.match(letters)) {} else if (nouser == 1) {} else {
let cloneLi = clearListItem.cloneNode();
cloneLi.textContent = 'Username can only have letters.'
docFrError.append(cloneLi);
error[0] = 1;
}
if (confirmValue.length == 0) {
let cloneLi = clearListItem.cloneNode();
cloneLi.textContent = 'Confirm field has been left blank.'
docFrError.append(cloneLi);
error[2] = 1;
}
if (ageValue.length == 0) {
let cloneLi = clearListItem.cloneNode();
cloneLi.textContent = 'Age field has been left blank.'
docFrError.append(cloneLi);
error[3] = 1;
}else
if (ageValue <= 0) {
let cloneLi = clearListItem.cloneNode();
cloneLi.textContent = 'Age should be a positive integer.'
docFrError.append(cloneLi);
error[3] = 1;
} else
if ((ageValue < 18) || (ageValue > 110)) {
let cloneLi = clearListItem.cloneNode();
cloneLi.textContent = 'Age should be between the values 18 and 110.'
docFrError.append(cloneLi);
error[3] = 1;
}
if (error[0] == 1) {
usernameContainer.classList.add("form-group", "has-error");
} else {
usernameContainer.classList.add("form-group", "has-success");
}
if (error[1] == 1) {
passwordContainer.classList.add("form-group", "has-error");
} else {
passwordContainer.classList.add("form-group", "has-success");
}
if (error[2] == 1) {
confirmContainer.classList.add("form-group", "has-error");
} else {
confirmContainer.classList.add("form-group", "has-success");
}
if (error[3] == 1) {
ageContainer.classList.add("form-group", "has-error");
} else {
ageContainer.classList.add("form-group", "has-success");
}
if (docFrError.childNodes.length > 0) {
list.append(docFrError);
ev.preventDefault();
} else {
let cloneLi = clearListItem.cloneNode();
cloneLi.textContent = 'Form values successfully validated.'
docFrError.append(cloneLi);
output.classList.add("alert", " alert-success");
list.append(docFrError);
return true;
}
}
function resetfunc() {
list.innerHTML = "";
ageContainer.classList.remove("form-group", "has-success", 'has-error');
usernameContainer.classList.remove('has-error');
passwordContainer.classList.remove("form-group", "has-success", 'has-error');
confirmContainer.classList.remove("form-group", "has-success", 'has-error');
}
}); <form id="myForm">
<div class="container">
<div id="usrnm">
<label class="control-label">Username: </label>
<input class="form-control" type="text" name="username" id="username">
</div>
<div id="pswrd">
<label class="control-label">Password: </label>
<input class="form-control" type="password" name="password" id="password">
</div>
<div id="cnfrm">
<label class="control-label">Confirm: </label>
<input class="form-control" type="password" name="confirm" id="confirm">
</div>
<div id="ag">
<label class="control-label">Age: </label>
<input class="form-control" align: "right" type="text" name="age" id="age">
<br>
</div>
</div>
<div class="buttons">
<input type="submit" id="submit" class="btn btn-primary">
<input type="reset" id="reset" class="btn btn-default">
</div>
</form>
<div class="alert alert-danger" id="output">
<ul id="list"> </ul>
</div>