我有一个表单，用于在点击提交按钮时验证提供的信息。如果信息不正确，则会在表单上方显示错误消息。我希望清除表单上方的警告消息以及字段，但它只清除字段。
function validateForm() {
document.getElementById("demo").innerHTML = "";
var warningText="";
var phoneno = /^\d{10}$/;
if(document.Registration.userName.value.length<8){
warningText="<li>Username is required!</li>";
document.getElementById("demo").innerHTML = warningText;}
if(document.Registration.psw.value.length<8){
warningText=warningText+ "<li>Password must be at least 8 characters </li>"
document.getElementById("demo").innerHTML = warningText;}
if(document.Registration.firstName.value.trim().length==0){
warningText=warningText+ "<li>First name is required!</li>"
document.getElementById("demo").innerHTML = warningText;}
if(document.Registration.lastName.value.trim().length==0){
warningText=warningText+ "<li>Last name is required!</li>"
document.getElementById("demo").innerHTML = warningText;}
if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(document.Registration.email.value)){
warningText=warningText+ "<li>Not a valid email!</li>"
document.getElementById("demo").innerHTML = warningText;}
if(!document.Registration.usrtel.value.match(phoneno)){
warningText=warningText+ "<li>Not valid phone number!</li>"
document.getElementById("demo").innerHTML = warningText;}
else {
alert("Your registration has been processed.")}
}
</script>
</head>
<body>
<h2>Registration</h2>
<p id="demo"> </P>
<form id="Registration" name="Registration">
<table>
<tr><td>Username:</td> <td><input type="text" name="userName" required
size="15" />(At least 8 characters)</td>
<tr><td>Password:</td> <td><input type="password" name="psw" pattern=".{8,}"
required size="15"/>(At least 8 characters)</td>
<tr><td>First Name:</td> <td><input type="text" name="firstName" required
size="15"/></td>
<tr><td>Last Name:</td> <td><input type="text" name="lastName" required
size="15"/></td>
<tr><td>Date of Birth:</td> <td><input type="date" name="bday" required
size="10"/></td>
<tr><td>Email:</td> <td><input type="email" name="email" size="15" required />
</td>
<tr><td>Phone Number:</td> <td><input type="tel" name="usrtel"
maxlength="10"
size="15"/>(Optional)<td>
</table>
<input type="button" onClick="validateForm()" value="Submit"/>
<input type="reset" onClick= "reset" value="Clear"/>
</P>
</form>
</body>
</html>
单击程序中的重置按钮将重置表单值（https://www.w3schools.com/tags/att_input_type_reset.asp），但它不会对ID为“demo”的段落的innerHTML属性执行任何操作。您可以在脚本中创建一个简单的函数来重置innerHTML属性，而不是onclick="reset"：
function clearFormHTML() {document.getElementById("demo").innerHTML="";}
然后，
<input type="reset" onclick="clearFormHTML()" value="Clear"/>
此外，你似乎有一个额外的关闭</P>标签。