Question

我有一个表单，可以在单击“提交”按钮时验证提供的信息。如果信息不正确，则会在表格上方显示错误消息。我希望清除表格上方和字段上方的警告消息，但是仅清除字段。

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>

Answer 1

单击程序中的重置按钮将重置表单值（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>标签。

HTML表单在表单上方打印警告文本，但不会清除

1 个答案: