个人中心
gpt4 book ai didi

javascript - 如何使用 JavaScript 在同一页面中显示包含名字、姓氏、电子邮件和密码验证的表单数据

转载 作者：行者123 更新时间：2023-11-28 04:23:16 25 4
gpt4 key购买 nike 

<!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 来显示表单值。

最佳答案

使用 jQuery 验证 js...建议您的首要原因是您不必手动编写代码，因为 js 会自动跟踪这一点。

https://jqueryvalidation.org/

希望这会对您有所帮助。

关于javascript - 如何使用 JavaScript 在同一页面中显示包含名字、姓氏、电子邮件和密码验证的表单数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45273312/

25 4 0
文章推荐： c++ - 需要帮助理解 "rand() % 67 < 10"
文章推荐： javascript - 为什么 JSF ajax 状态成功在 Chrome 中不起作用？
文章推荐： html - 两个 div，排成一行，中间有文字
文章推荐： javascript - 将调度函数传递给子组件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com