如何使错误信息显示在网页上?

Question

function validate() {
var errMsg = "";
var result = true;
var fname = document.getElementById("fname").value;
if (!fname.match(/^[a-zA-Z]+$/)) {
errMsg += "Please enter your first name correctly.n";
result = false;
}
var lname = document.getElementById("lname").value;
if (!lname.match(/^[a-zA-Z]+$/)) {
errMsg += "Please enter your last name correctly.n";
result = false;
}
var email = document.getElementById("email").value;
if (!email.match(/[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$/)) {
errMsg += "Please enter your email correctly.n";
result = false;
}
var streetname = document.getElementById("streetname").value;
if (!streetname.match(/^[a-zA-Z0-9s]+$/)) {
errMsg += "Please enter your street name correctly.n";
result = false;
}
var suburb = document.getElementById("suburb").value;
if (!suburb.match(/^[a-zA-Z-]+$/)) {
errMsg += "Please enter your suburb correctly.n";
result = false;
}
var phone = document.getElementById("phone").value;
if (!phone.match(/[0-9]{9}/)) {
errMsg += "Please enter your phone number correctly.n";
result = false;
}
var gender = document.getElementById("gender").value;
var start = document.getElementById("start").value;
var skill = document.getElementById("skill").value;
var other = document.getElementById("other").value;
var otherbox = document.getElementById("otherbox").value;
var postcode = document.getElementById("postcode").value;
var state = document.getElementById("state").options[
document.getElementById("state").selectedIndex
].text;
var regex;
//VIC = 3 OR 8, NSW = 1 OR 2 ,QLD = 4 OR 9 ,NT = 0 ,WA = 6 ,SA=5 ,TAS=7 ,ACT= 0.
switch (state) {
case "Please Select":
return false;
case "VIC":
regex = new RegExp(/(3|8)d+/);
break;
case "NSW":
regex = new RegExp(/(1|2)d+/);
break;
case "QLD":
regex = new RegExp(/(4|9)d+/);
break;
case "NT":
regex = new RegExp(/0d+/);
break;
case "WA":
regex = new RegExp(/6d+/);
break;
case "SA":
regex = new RegExp(/5d+/);
break;
case "TAS":
regex = new RegExp(/7d+/);
break;
case "ACT":
regex = new RegExp(/0d+/);
break;
}
if (!postcode.match(regex)) {
errMsg = errMsg + "State and postcode do not matchn";
result = false;
}
if (errMsg) {
alert(errMsg);
}
if (result) {
storeBooking(
fname,
lname,
start,
email,
gender,
phone,
streetname,
suburb,
state,
postcode,
other,
otherbox
);
}
return result;
}

<form action="https://mercury.swin.edu.au/it000000/formtest.php" method="post" id="regform">
<p>Your Name: <span id="job1"></span></p>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name.." required="required" maxlength="25" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)">

<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name.." required="required" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)">
<label for="start">Date of birth:</label>
<input type="date" id="start" required="required" name="date of birth" value="2021-10-04" />
<br>
<br>
<label for="gender"> Select you gender</label>
<br>
<br>
<select name="gender" id="gender" required="required">
<option value="" selected>Please Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<br>
<label for="streetname">Street Address</label>
<input type="text" id="streetname" name="streetname" required="required" placeholder="Your street name..." maxlength="40" />
<label for="suburb">Suburb/Town</label>
<input type="text" id="suburb" name="suburb" required="required" placeholder="Your suburb/town..." maxlength="40">
<label for="state">Choose a state:</label>
<br>
<select name="state" id="state" required="required">
<option value="">Please Select</option>
<option value="VIC">VIC</option>
<option value="NSW">NSW</option>
<option value="QLD">QLD</option>
<option value="NT">NT</option>
<option value="WA">WA</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="ACT">ACT</option>
</select>
<br>
<br>
<label for="postcode">Postcode</label>
<input type="text" id="postcode" name="postcode" required="required" placeholder="Your postcode..." maxlength="4" minlength="4" pattern="^[0-9]{4}$">
<label for="email">Email Address</label>
<input type="text" id="email" name="emailadd" placeholder="Your email address.." required="required">
<label for="phone">Phone Number</label>
<input type="text" id="phone" name="phonenumb" placeholder="e.g. 0451124561" minlength="8" maxlength="12" required="required">
<br>
<input type="submit" value="Apply">
<br>
<br>
<input type="submit" id="cancelpurchase" value="Cancel Application"></input>
</form>

我如何使它，使错误信息显示在实际的网页，而不是一个警告框，旁边的输入?我似乎在网上找不到任何关于更改错误信息显示的默认方式的内容。如果您需要更少/更多的信息，请向我提出建议。

注意:没有jQuery或内联JavaScript。

Answer 1

您可以使用display: none和position: fixed来创建<div id="popup"> Error message </div>，而不是警告，使该div可见document.querySelector('#popup').style.display = 'block'并在其中设置关闭按钮来关闭该弹出窗口

Answer 2

显示错误信息，代码如下:

if (errMsg) {
alert(errMsg);
}

如果你得到一个元素的引用，

如var tgtElem = document.getElementById(textStringIdGoesHere);

你可以通过设置它的textContent来显示消息，

如tgtElem.textContent = errMsg;