如何使用JavaScript在同一頁面上顯示包含名字，姓氏電子郵件和密碼驗證的表單數據
[英]How do I display a form data containing first name last name email and password validations in the same page using JavaScript
問題描述
<!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才能用於顯示表單值。
1 個解決方案
解決方案1
0
如何在 JavaScript 中對名字、中間名和姓氏進行屏蔽？
[英]How do I make masking in the first name, middle name,and last name in JavaScript?
名字，姓氏和電子郵件地址的JavaScript表單驗證未顯示任何內容
[英]JavaScript form validation for first name, last name and email address is displaying nothing
如何在JavaScript中按名字或姓氏或名字和姓氏精確搜索？
[英]How to search exactly by first or last name or by first and last name in JavaScript?
在html文檔中使用表單時，如何在同一頁面中顯示數據？
[英]How do i display data in the same page while using a form in a html doc?
如何將具有名字和姓氏的字符串轉換為具有 {firstName: "string first name", lastName: "string last name} 屬性的對象？
[英]How do I convert a string with a first name and last name to an object w/ properties of {firstName: "string first name", lastName: "string last name}?
如何像我對名字和姓氏一樣驗證電子郵件和密碼？
[英]How to validate email and passwords like I did with first name and last name?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
使用 JavaScript 驗證密碼和名字
如何在 JavaScript 中對名字、中間名和姓氏進行屏蔽？
名字，姓氏和電子郵件地址的JavaScript表單驗證未顯示任何內容
使用 JavaScript 拆分名字和姓氏
如何在 javascript 中結合名字和姓氏？
如何在JavaScript中按名字或姓氏或名字和姓氏精確搜索？
在html文檔中使用表單時，如何在同一頁面中顯示數據？
如何將具有名字和姓氏的字符串轉換為具有 {firstName: "string first name", lastName: "string last name} 屬性的對象？
如何獲取Java表單的名稱？
如何像我對名字和姓氏一樣驗證電子郵件和密碼？
相關標簽