<!DOCTYPE html>
<html>
<head>
<script>
function validateform() {
var status = true;
var f = document.forms["myForm"]["fname"];
var l = document.forms["myForm"]["lname"];
var a = document.forms["myForm"]["age"];
var g = document.forms["myForm"]["gender"];
var m = document.forms["myForm"]["mobile"];
var u = document.forms["myForm"]["uname"];
if (f.value == "") {
document.getElementById("fname-error").innerHTML = "Please Enter your First
Name";
document.getElementById("fname-error").style.color = "Red";
status = false;
} else {
document.getElementById("fname-error").innerHTML = "Valid First Name";
document.getElementById("fname-error").style.color = "Green";
status = true;
}
if (l.value == "") {
document.getElementById("lname-error").innerHTML = "Please Enter your Last
Name";
document.getElementById("lname-error").style.color = "Red";
status = false;
} else {
document.getElementById("lname-error").innerHTML = "Valid Last Name";
document.getElementById("lname-error").style.color = "Green";
status = true;
}
if (a.value == "") {
document.getElementById("age-error").innerHTML = "Please Enter your age";
document.getElementById("age-error").style.color = "Red";
status = false;
} else {
document.getElementById("age-error").innerHTML = "Age Selected";
document.getElementById("age-error").style.color = "Green";
status = true;
}
if (g.value == "") {
document.getElementById("gender-error").innerHTML = "Please select your
gender";
document.getElementById("gender-error").style.color = "Red";
status = false;
} else {
document.getElementById("gender-error").innerHTML = "Gender Selected";
document.getElementById("gender-error").style.color = "Green";
status = true;
}
if (m.value.length < 10 || m.value.length > 10) {
document.getElementById("mobile-error").innerHTML = "Please Enter a valid
Mobile Number";
document.getElementById("mobile-error").style.color = "Red";
status = false;
} else {
document.getElementById("mobile-error").innerHTML = "Valid Mobile Number";
document.getElementById("mobile-error").style.color = "Green";
status = true;
}
if (u.value == "") {
document.getElementById("uname-error").innerHTML = "Please Choose a
Username";
document.getElementById("uname-error").style.color = "Red";
status = false;
} else {
document.getElementById("uname-error").innerHTML = "Valid Username";
document.getElementById("uname-error").style.color = "Green";
status = true;
}
return true;
}
function checkPass(passId) {
if (/^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/.test(passId)) {
document.getElementById("pass1-error").innerHTML = "You have entered valid
Password.";
document.getElementById("pass1-error").style.color = "Green";
return true;
}
return false;
}
function ValidatePassid() {
var passID = document.forms["myForm"]["passid1"];
if ((passID.value == null) || (passID.value == "")) {
document.getElementById("pass1-error").innerHTML = "Please Enter your
password";
document.getElementById("pass1-error").style.color = "Red";
passID.focus();
return false;
}
if (checkPass(passID.value) == false) {
passID.value = "";
document.getElementById("pass1-error").innerHTML = "Invalid Password";
document.getElementById("pass1-error").style.color = "Red";
passID.focus();
return false;
}
return true;
}
function Validate() {
var pass1 = document.forms["myForm"]["passid1"];
var pass2 = document.forms["myForm"]["passid2"];
if (pass1.value != pass2.value) {
document.getElementById("pass2-error").innerHTML = "Passwords do not
match.";
document.getElementById("pass2-error").style.color = "Red";
return false;
} else {
document.getElementById("pass2-error").innerHTML = "Passwords match.";
document.getElementById("pass2-error").style.color = "Green";
return true;
}
return true;
}
function checkEmail(emailId) {
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailId)) {
document.getElementById("email-error").innerHTML = ("You have entered a
valid email");
document.getElementById("email-error").style.color = "Green";
return true;
}
return false;
}
function ValidateEmail() {
var emailID = document.forms["myForm"]["email"];
if ((emailID.value == null) || (emailID.value == "")) {
document.getElementById("email-error").innerHTML = "Please Enter your Email
ID";
document.getElementById("email-error").style.color = "Red";
emailID.focus();
return false;
}
if (checkEmail(emailID.value) == false) {
emailID.value = "";
document.getElementById("email-error").innerHTML = "Invalid Email Adderess";
document.getElementById("email-error").style.color = "Red";
emailID.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form name="myForm" id="MyForm">
<fieldset>
<legend>
<h4>Registration Form</h4>
</legend>
<table>
<tr>
<td>First Name:</td>
<td>
<input type="text" name="fname" />
<div id="fname-error" class="error"></div>
</td>
</tr>
<tr>
<td>Last Name:</td>
<td>
<input type="text" name="lname" />
<div id="lname-error" class="error"></div>
</td>
</tr>
<tr>
<td>Age:</td>
<td>
<input type="number" name="age" minlength ="0" maxlength = "100"/>
<div id="age-error" class="error"></div>
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input list="genders" name="gender" />
<datalist id="genders">
<option value="Male">
<option value="Female">
<option value="Other">
</datalist>
<div id="gender-error" class="error"></div>
</td>
</tr>
<tr>
<td>Mobile:</td>
<td>
<input type="number" name="mobile" minlength="10" maxlength ="10"/>
<div id="mobile-error" class="error"></div>
</td>
</tr>
<tr>
<td>Username:</td>
<td>
<input type="userid" name="uname" />
<div id="uname-error" class="error"></div>
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" name="passid1" minlength="6" />
<div id="pass1-error" class="error"></div>
</td>
</tr>
<tr><td>Confirm Password:</td>
<td>
<input type="password" name="passid2" minlength="6"/>
<div id="pass2-error" class="error"></div>
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type="email" name="email" />
<div id="email-error" class="error"></div>
</td>
</tr>
<tr>
<td colspan="2">
<button onlick="return !!(validateform() & ValidatePassid() &
Validate() & ValidateEmail())">Submit</button>
<span id="display">
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
我不应该使用任何服务器端语言，因为它是一个学校项目，我尝试使用 onclick 显示数据，但它不起作用。任何人都可以解决这个问题并指导我解决它。即使您建议使用任何服务器端语言，我也无法使用它们，因为他们没有教授这些语言。只能使用基本的 JavaScript 来显示表单值。
最佳答案
关于javascript - 如何使用 JavaScript 在同一页面中显示包含名字、姓氏、电子邮件和密码验证的表单数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45273312/